人脸鼠标跟随效果
代码语言：html
所属分类：拖放
代码描述：可从鼠标的位置来模拟人脸的朝向，达到交互的效果
代码标签： 效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Redressed&display=swap");
body {
background-color: #02020f;
color: white;
font-size: 65.2%;
text-align: center;
overflow-x: hidden;
/* Hide horizontal scrollbar */
}
body h1 {
font-family: "Redressed";
font-size: 5em;
margin-bottom: 0;
}
body p {
font-family: "Redressed";
font-size: 3em;
margin-top: 0;
}
body a {
color: white;
text-decoration: none;
-webkit-transition: all .5s;
transition: all .5s;
}
body a:hover {
color: #b41818;
}
.canvas {
max-height: 600px;
height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
.canvas svg {
display: block;
margin-left: auto;
margin-right: auto;
}
.canvas svg {
position: relative;
}
.canvas svg.ears {
top: -110px;
-webkit-transform: translateZ(40px);
transform: translateZ(40px);
}
.canvas svg.face {
top: -380px;
-webkit-transform: translateZ(60px);
transform: translateZ(60px);
}
.canvas svg.wringles {
top: -780px;
-webkit-transform: translateZ(80px);
transform: translateZ(80px);
}
.canvas svg.lips {
top: -765px;
-webkit-transform: translateZ(140px);
transform: translateZ(140px);
}
.canvas svg.beard {
top: -860px;
-webkit-transform: translateZ(120px);
transform: translateZ(120px);
}
.canvas svg.nose {
top: -950px;
-webkit-transform: translateZ(140px);
transform: translateZ(140px);
}
.canvas svg.eyes {
top: -1070px;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
.canvas svg.eyes .eye_lids {
fill: rgba(87, 47, 28, 0);
-webkit-animation: blink 5s infinite;
animation: blink 5s infinite;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-webkit-keyframes blink {
0% {
fill: rgba(87, 47, 28, 0);
}
5% {
fill: #572f1c;
}
7% {
fill: rgba(87, 47, 28, 0);
}
}
@keyframes blink {
0% {
fill: rgba(87, 47, 28, 0);
}
5% {
fill: #572f1c;
}
7% {
fill: rgba(87, 47, 28, 0);
}
}
.canvas svg.glasses {
top: -1120px;
-webkit-transform: translateZ(140px);
transform: translateZ(140px);
}
.canvas svg.eyebrows {
top: -1230px;
-webkit-transform: translateZ(100px);
transform: translateZ(100px);
}
</style>
</head>
<body translate="no">
<h1>"Bob's your uncle"</h1>
<p>
<a href="" target="">Illustration by thatAfro</a>
</p>
<div class="canvas" data-tilt data-perspective="3500" data-reverse="true" data-base="window">
<svg class="hair" width="373px" height="338px">
<path fill-rule="evenodd" fill="rgb(1, 16, 27)" d="M371.483,250.240 C369.491,379.490 187.400,327.143 187.400,327.143 C185.806,325.208 184.822,322.938 184.303,320.451 C165.608,323.207 17.526,342.050 1.701,250.240 C1.701,250.240 -9.324,102.639 52.976,50.184 C113.904,-1.115 183.552,0.089 186.592,0.167 C189.632,0.089 259.280,-1.115 320.208,50.184 C382.508,102.639 371.483,250.240 371.483,250.240 Z" />
</svg>
<svg class="ears" width="407px" height="135px">
<path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M404.979,29.887 C404.979,29.887 389.625,89.566 389.621,105.024 C389.621,105.024 391.779,145.918 355.248,132.103 C318.716,118.288 318.704,17.440 360.367,4.272 C360.367,4.272 414.495,-13.888 404.979,29.887 ZM16.876,105.024 C16.872,89.566 1.518,29.887 1.518,29.887 C-7.997,-13.888 46.130,4.272 46.130,4.272 C87.793,17.440 87.781,118.288 51.250,132.103 C14.718,145.918 16.876,105.024 16.876,105.024 Z" />
</svg>
<svg class="face" width="327px" height="458px">
<path fill-rule="evenodd" fill="rgb(154, 97, 70)" d="M326.650,206.640 C326.007,258.921 322.497,308.452 306.024,341.246 C306.024,341.246 294.926,432.429 231.768,434.794 C231.768,434.794 208.027,463.756 163.472,456.409 C118.917,463.756 95.175,434.794 95.175,434.794 C32.017,432.429 20.920,341.246 20.920,341.246 C4.446,308.452 0.937,258.921 0.293,206.640 C-0.048,178.946 17.482,136.478 17.482,136.478 C12.006,78.925 28.483,28.118 28.483,28.118 C51.673,-10.878 146.781,1.776 163.472,4.328 C180.162,1.776 275.270,-10.878 298.461,28.118 C298.461,28.118 314.937,78.925 309.462,136.478 C309.462,136.478 326.991,178.946 326.650,206.640 Z" />
</svg>
<svg class="wringles" width="195.063px" height="296.063px">
<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="2.032px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M161.790,227.409 C161.790,227.409 193.815,255.893 191.532,290.836 " />
<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="2.032px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M35.754,229.604 C35.754,229.604 3.729,258.088 6.013,293.032 " />
<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="3.047px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M2.112,30.052 C2.112,30.052 48.492,15.342 72.078,27.612 C95.664,39.883 111.841,32.165 126.198,26.880 C140.554,21.596 174.269,17.748 188.606,26.148 " />
<path fill-rule="evenodd" stroke="rgb(113, 65, 43)" stroke-width="3.047px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M2.112,10.536 C2.112,10.536 48.492,-4.175 72.078,8.096 C95.664,20.367 111.841,12.649 126.198,7.364 C140.554,2.080 174.269,-1.768 188.606,6.632 " />
</svg>
<svg class="lips" width="135px" height="39px">
<path fill-rule="evenodd" fill="rgb(113, 65, 43)" d="M103.256,35.468 C94.968,38.395 74.978,38.395 67.664,38.395 C60.351,38.395 40.360,38.395 32.072,35.468 C23.783,32.540 0.380,15.464 0.380,15.464 C21.833,-6.980 67.664,1.802 67.664,1.802 C67.664,1.802 113.495,-6.980 134.948,15.464 C134.948,15.464 111.545.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0