马面人跟随鼠标转移视线摇头特效
代码语言：html
所属分类：视觉差异
代码描述：马面人跟随鼠标转移视线摇头特效
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body {
height: 100%;
}
body {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
svg {
width: 100%;
height: 100vh;
visibility: hidden;
}
</style>
</head>
<body translate="no">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600" xml:space="preserve">
<defs>
<clipPath id="eyeLClip">
<circle cx="328.75" cy="270" r="17" />
</clipPath>
<clipPath id="eyeRClip">
<circle cx="463.25" cy="266.5" r="17" />
</clipPath>
<clipPath id="mouthClip">
<path d="M353.624,487.645c0.068,2.867,1.001,5.645,2.538,8.066c5.041,7.938,20.645,28.989,44.834,28.983
c18.702-0.005,31.546-12.487,38.408-21.385c2.95-3.825,5.153-8.18,6.389-12.85c1.945-7.349,0.228-9.192-0.926-9.644
c-0.436-0.171-0.932-0.04-1.259,0.296c-2.953,3.031-23.74,20.943-42.484,20.943c-20.474,0-41.068-22.645-41.068-22.645
S353.429,479.401,353.624,487.645z" />
</clipPath>
<clipPath id="svgClip">
<rect fill="none" width="800" height="600" />
</clipPath>
</defs>
<g clip-path="url(#svgClip)">
<g id="bodyGroup">
<rect x="292.824" y="444.002" width="219.963" height="69.404" />
<path fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M148.5,600.5
c0,0,11.213-69.518,102.143-107.088c22.822-9.429,47.038-15.017,71.631-17.236c25.178-2.272,48.448-3.387,69.372-3.756
c38.552-0.679,69.141,1.179,89.026,3.014c35.455,3.273,69.232,17.177,96.141,40.493c21.455,18.59,41.742,45.682,50.686,84.571
H148.5z" />
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M504.169,467.566
c-0.314-5.093-5.596-48.739-94.451-53.919v-46.049h2.371c18.131,8.228,74.265,34.691,88.26,53.06c0,0,15.414,11.959,27.995,46.908
" />
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M298.346,467.566
c0.314-5.093,5.596-48.739,94.451-53.919v-46.049h-2.371c-18.131,8.228-74.265,34.691-88.26,53.06
c0,0-15.414,11.959-27.995,46.908" />
<polyline id="neck" fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="300.373,504.69
300.373,497.708 302,300 494,300 502.95,497.708 503.464,508.775 " />
<g>
<path fill="#5273C4" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M401.253,570.097
c-74.707,1.005-103.056-76.415-103.056-76.415v226.542h103.056h103.056V493.682C504.309,493.682,475.96,571.103,401.253,570.097z
" />
<path fill="#5273C4" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M401.11,585.551
c-64.596,0.792-101.963-47.06-101.963-47.06v181.679h102.399h0.304h102.399V538.492
C504.249,538.492,465.706,586.343,401.11,585.551z" />
</g>
<g>
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M296.824,467.241
c0,0-72.605,18.304-103.111,53.691s-45.759,51.25-56.131,139.108c0,0-6.711,81.101-2.441,101.258h181.817
c0,0-5.491-203.759-28.066-240.366L296.824,467.241z" />
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M274.17,467.566
c-10.233,28.425-18.591,72.059-15.257,136.836l48.659,23.053l-39.873,31.189l11.489,54.242h44.183l-12.996-140.974
l-12.048-78.345l0.001-25.516c0,0,0-0.168,0.02-0.484c0,0,0.177-2.721,0.575-3.904" />
</g>
<g>
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M505.692,467.241
c0,0,72.605,18.304,103.111,53.691s45.759,51.25,56.131,139.108c0,0,6.711,81.101,2.44,101.258H485.558
c0,0,5.491-203.759,28.066-240.366L505.692,467.241z" />
<path fill="#767676" stroke="#000000" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M524.719,458.267
l3.626,9.299c10.233,28.425,18.591,72.059,15.257,136.836l-48.659,23.053l39.873,31.189l-11.489,54.242h-44.183l12.996-140.974
l12.048-78.345l-0.001-26.325c0,0-0.555-4.431-0.952-5.065" />
</g>
</g>
<g id="headGroup">
<path d="M487.486,222.561c0,0,3.306-13.352,3.56-14.877c0.254-1.526,0.763-13.987-1.272-14.877s-2.289,2.289-2.289,2.289
s-0.381,0.509-1.144,0.254s1.907-10.681,1.907-14.114c0-3.433-0.06-21.235-4.798-22.38c0,0-1.961,0.509-2.396,4.705
c-0.435,4.196-0.308,8.774-1.834,8.774s-1.526-6.612-1.526-6.612l-3.815,6.739L487.486,222.561z" />
<path d="M304.54,253c0,0-6.536-5.195-7.192-11.968c-0.05-0.518,0.296-0.996,0.811-1.074c2.68-0.407,3.915-1.372,3.915-1.372
s-6.408-9.635-3.769-22.535c0.167-0.818,0.853-1.442,1.683-1.537c1.536-0.176,3.875-0.022,4.553,2.349
c0,0-5.434-29.757-2.07-39.59c0,0,3.517-1.294,4.476,3.623c0.958,4.916,6.012,5.434,6.012,5.434s-4.779-18.463,0-27.474
l4.261-2.283l2.624,24.347L304.54,253z" />
<path id="head" fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M487.633,256.934l2.293-18.348
c0.679-5.436,0.154-10.95-1.553-16.155C482.265,203.804,474,173,474,173s-27-19-36-35s-42-19-42-19s-33,3-42,19s-36,35-36,35
s-8.265,30.804-14.374,49.431c-1.707,5.205-2.232,10.719-1.553,16.155l2.293,18.348c0.402,3.218,0.114,6.481-0.83,9.584
C297.307,286.992,276.163,370.972,341,392h55h55c64.837-21.028,43.693-105.008,37.463-125.482
C487.519,263.415,487.231,260.153,487.633,256.934z" />
<g id="earR">
<path fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M471.441,179
c0,0,17.411-20.669,10.305-62.243c0,0-4.264-47.615-13.858-51.524c0,0-4.817-0.311-10.469,12.155
c0,0-19.436,41.137-21.114,67.247c0,0-0.392,11.651,2.515,16.984" />
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M460.572,166.782
c0,0-15.701-26.906-0.894-62.183" />
</g>
<path id="hair" d="M369.985,153.153l-5.333,31.027c0,0,5.333,2.909,11.15-9.696v26.663c0,0,13.089-4.848,20.846-45.57
c0,0,3.394,21.816,5.817,24.239l3.983-6.314c0,0,3.117,31.045,9.872,35.202c0,0,8.703-3.507,7.664-30.396
c0,0,7.534,10.651,8.963,16.237c1.429,5.586,7.274-23.122,2.728-34.942c0,0,4.157,6.365,7.664,5.456
c3.507-0.909,1.14-13.764-2.486-19.871s-3.105-13.529-3.105-13.529s4.962-6.489-0.573-9.542c0,0-5.506-3.936-8.403-4.2
c0,0-2.828-2.63,1.408-4.043c2.72-0.907,6.159-0.923,8.273-0.819c0.819,0.04,1.315-0.908,0.806-1.551
c-1.818-2.299-5.977-6.149-13.631-6.529c-3.649-0.181-7.288,0.552-10.658,1.964c-2.139,0.896-4.946,1.893-5.972,1.453
c-1.744-0.748,2.237-13.872,2.237-13.872s-6.225-3.904-12.455,17.112c0,0-19.304-15.458-25.109-12.491
c-2.967,1.806,5.547,9.03,5.547,9.03s-20.622-2.503-25.656,8.647c-0.306,0.678,0.194,1.452,0.936,1.489l11.304,0.571l-12.21,6.147
c-1.384,0.697-2.4,1.949-2.8,3.445c-0.553,2.066-1.26,5.204-1.45,8.332c-0.21,3.457,1.013,6.9,1.064,8.875
c0.058,2.265,1.223,2.559,3.732,5.792c1.948,2.511,3.18,8.117,4.568,9.332c0.892,0.781,2.175,0.941,3.213,0.369
c1.959-1.08,4.252-4.452,6.205-10.816C368.125,150.353,370.578,149.702,369.985,153.153z" />
<g id="earL">
<path fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M319.506,175.548
c0,0-7.403-17.873-11.325-31.184c-6.025-20.449-2.16-42.848,11.228-76.756c0.33-0.836,1.179-1.367,2.072-1.262
c4.852,0.569,19.921,5.508,28.493,44.016c2.924,13.137,1.538,30.704-1.046,51.879" />
<path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M328.24,106.354
c0,0,14.018,25.74,3.774,55.265" />
</g>
<g id="headDetail">
<polygon fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="396,197 377,251 399,299.143 421,252" />
</g>
</g>
<g id="noseGroup">
<path id="nose" fill="#7D4E30" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M348,317.159
c0,0-4.822,49.016,0,107.841c0,0-19.14,33.381-4,49.462c0,0-9.066,10.337,0,19.931c7.253,7.675,10.642,11.795,11.708,15.463
c0.925,3.183,2.703,6.054,4.952,8.489c6.152,6.66,18.64,16.838,38.16,17.942l0,0c1.22,0.052,2.441,0.052,3.661,0l0,0
c19.52-1.104,32.008-11.282,38.16-17.942c2.249-2.435,4.028-5.306,4.952-8.489c1.066-3.668,4.455-7.788,11.708-15.463
c9.066-9.594,0-19.931,0-19.931c15.14-16.081-4-49.462-4-49.462c4.822-58.825,0-107.841,0-107.841" />
<g id="noseDetailGroup">
<g id="mouthGroup">
<radialGradient id="mouthGrad" cx="400.1471" cy="502.0523" r="36.5885" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#521E2A" />
<stop offset="0.58" style="stop-color:#541E2B" />
<stop offset="0.7886" style="stop-color:#5B1F2C" />
<stop offset="0.8687" style="stop-color:#60202E" />
<stop offset="0.8687" style="stop-color:#692131" />
<stop offset="0.8687" style="stop-color:#742434" />
<stop offset="0.8687" style="stop-color:#7B2536" />
<stop offset="0.8687" style="stop-color:#7D2537" />
<stop offset="0.8808" style="stop-color:#8A273B" />
<stop offset="0.8997" style="stop-color:#95293E" />
<stop offset="0.9262" style="stop-color:#9C2A40" />
<stop offset="1" style="stop-color:#9E2A41" />
</radialGradient>
<path id="mouth" fill="url(#mouthGrad)" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M353.624,487.645c0.068,2.867,1.001,5.645,2.538,8.066
c5.041,7.938,20.645,28.989,44.834,28.983c18.702-0.005,31.546-12.487,38.408-21.385c2.95-3.825,5.153-8.18,6.389-12.85
c1.945-7.349,0.228-9.192-0.926-9.644c-0.436-0.171-0.932-0.04-1.259,0.296c-2.953,3.031-23.74,20.943-42.484,20.943
c-20.474,0-41.068-22.645-41.068-22.645S353.429,479.401,353.624,487.645z" />
<g clip-path="url(#mouthClip)">
<g id="tongue">
<path fill="#CB576C" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M420.024,498.339l-18.778,3.457
l-20.581-5.07c0,0-8.423,31.388,19.37,32.206C427.828,528.113,420.024,498.339,420.024,498.339z" />
<path fill="#CB576C" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M401.644,499.629
c0,0,1.203,15.125-1.653,20.426" />
</g>
<g id="teethBottom">
<polygon fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" points="
361.429,493.299 359.994,504.2 369.231,512.932 369.988,502.118 " />
<polygon fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" points="
382.71,512.404 381.928,522.547 369.231,513.755 369.91,502.052 " />
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M401.079,517.035
c0,0-13.421-1.041-18.369-4.632l-0.562,9.089c0,0,4.525,4.057,18.931,4.363V517.035z" />
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M402.079,517.035
c0,0,8.993,0.474,17.863-4.468v9.51c0,0-7.859,4.289-17.863,3.778V517.035z" />
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M433.079,500.755
l1.863,10.518c0,0-4.324,7.051-14.999,10.805v-9.51C419.942,512.568,426.831,508.089,433.079,500.755z" />
<polygon fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" points="
433.079,500.755 441.172,490.767 444.423,500.471 434.941,511.273 " />
</g>
<g id="teethUpper">
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linejoin="round" stroke-miterlimit="10" d="M361.429,480.227
l-1.142,10.532l8.069,9.225c0.199,0.234,0.258-0.701,0.285-1.007l1.156-10.122L361.429,480.227z" />
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M382.979,504.156l-0.054,8.314l0.001,0.347l-2.888-2.078c-4.197-3.241-8.105-6.84-11.681-10.755l0,0l1.441-11.129
L382.979,504.156z" />
<path fill="#C5B9BA" stroke="#020202" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M401.001,507.011l-18.022-2.854c-0.091-0.014-0.173,0.056-0.173,0.148l-0.15,7.379c0,0.857,0.56,1.486,1.384,1.724
c.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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