vue实现机器人瓦力与鼠标交互动画效果代码
代码语言：html
所属分类：动画
代码描述：vue实现机器人瓦力与鼠标交互动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
width: 100vw;
height: 100vh;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
background: #23a9e0;
cursor: url("data:image/vnd.microsoft.icon;base64,AAABAAIAEBAAAAAAIABoBAAAJgAAACAgAAAAACAAqBAAAI4EAAAoAAAAEAAAACAAAAABACAAAAAAAEAEAAAAAAAAAAAAAAAAAAAAAAAA////ARAnXQMQJ10PECZcA////wH///8BECZdCQ8lWwkOI1kHDiVZCxEqXUUZOXaHIkGVfytGtyX///8B////Af///wEQJ10HECddYxAnXXEQJ10HDyVbCw8lWosPJlyFG0V+jzBrrNs+edj5OGDb5ypDt6EVJYYtCxp0A////wH///8B////ARAnXQsQJ11xDyZcmQ4lW6UUP3rPLnCx50GH3/09bOPrLkjAlyAzmyn///8B////Af///wH///8BECddLRAnXSEPJlwXDyRaqRApX+8jWpj/PYTT/z915PE1VdOTK0G2If///wH///8B////Af///wH///8B////ARAnXRkPJlxjDiNYjxpAePs3e8P/QX3k/TZa1M8rQ7pHJDmiA////wH///8B////Af///wH///8B////Af///wH///8BDyZcNSJKifVAgd7/OGHY9SpDt5UiNZ4X////Af///wH///8B////Af///wH///8B////Af///wH///8BJ2afAzpo04c5UcP/J0ON4R4xmVMVJYUF////Af///wH///8B////Af///wH///8B////Af///wH///8B////AQs+eBc1aMP1OE7G4ypKhUH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEIPHYjM2i/6TlJ2UP///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BDCBUQShYnVH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEQJ10D////AQ8lWzEPJVtJ////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEQJ10bECddQRAnXQMQJ10FECddXxAnXSv///8B////Af///wH///8B////Af///wH///8B////Af///wEQJ10nECddQxAnXQv///8B////ARAnXDsQJ107ECddORAnXQP///8B////Af///wH///8B////Af///wEQJ10vECddPRAnXQX///8B////Af///wEQJ10LECddSxAnXSsQJ11LECdcJxAnXRcQJ1wTECddGxAnXSsQJ11LECddLxAnXQP///8B////Af///wH///8B////ARAnXRcQJ11PECddIRAnXSEQJ10rECdcKxAnXSkQJ10bECddBxAnXB8QJ11DECdcRxAnXRH///8B////Af///wH///8BECddCRAnXDkQJ11JECddMxAnXSkQJ10tECZdQRAnXUcQJ10xECZdCRAnXQP///8B////AQAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8oAAAAIAAAAEAAAAABACAAAAAAAIAQAAAAAAAAAAAAAAAAAAAAAAAA////Af///wH///8B////ARAnXQP///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEHFkcDDSNVDQodTUMIG0ZzCh9LixIqY1MiP5QTLEm6A////wH///8B////Af///wH///8B////Af///wEQJ10JECddLRAnXQ8QJ10HECddA////wH///8B////Af///wEQJ10JECddGRAmXBMPJFoPDyRaDw0hVgcOJloJDiVZIw0iVGMUMWOdHUJ9tyZOnrEvVr2fNlrUgTFOx1seNJwhEyWEA////wH///8B////Af///wH///8B////ARAnXBUQJ12RECddqRAnXXcQJ1wf////Af///wH///8BECddAxAmXEcQJlyLDyVbZw4jWIMOI1hhES1iQxQ0aY0fSoDdL2el/T190u9DffHfQW708zdZ2/UoP7HHGCmLeQ0ceDELGnQF////Af///wH///8B////Af///wH///8B////ARAnXQcQJ11JECddtRAnXXcQJ10RECddCRAmXQUPJVsjECVZjw8kWMkNJFqXEC1klRhBerMmXpjnN369/0aT5f9Kjvf/QnLx/TRU1PMnPq/VHS6UiRcmhjsVI4QJ////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXRMQJ11tECddjxAnXYMQJ11bDyRaQw4iWGcNJVypDjBpwRZEgMUnZqTXN4LD/0WW4/9IjfL/QXLt+zZX2O8rQ7nNITWegRwtkSMYKYoD////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BECdcGRAnXXcQJ11RDyddiQ8lW/8OI1j7Dilg8xJAfOUgXp3tMnq6/0GP1v9GjOn/QXjs+Tlf4OcvSsXFJjupfSAzmiMcLpID////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXR8QJ10J////Af///wEQJ10XECZcfQ8lW4kOIljDDiFX/xEuZv8cUY7/LXOz/z6Kzv9GjuT/Q37s/Ttl5O0zUNC5K0K5ZSc8qhv///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEQJ10FECZdixAnXVEQJ10rECddHw8mWyEPJFqpDiJX9Q4kWv8WOnL/J2Si/zqFyf9Fj+D/RYTs/z5s6PU0VdbTLUbAgyo/sCP///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAmXQMQJ1xhECddqRAnXY8QJ11/DSBVXQ0hVu0TMmn/IVaR/zR7u/9CkNz/Ronq/0Bz6v03W9vrL0nFqyg9r0kkOaIL////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXQMQJ10hDyZbNQ4jWJsNIVbHFztz/y5vrv9Aj9j/Ro7p/0J66/85Yd/3MEzI0yg/soMjNqAl////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////AQcZRgUIHEpBDSVV2x5Gf/s5gcj/RpLq/0SA7P88Z+P/MlDN7ypBtq8iNqBPHjGXC////wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BEChhCxIqZoUePYH/PHzH/0WG5P8+bOT/NFXT+SpCudsjNqKNHCyQLf///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wE3bcUXNl3KrTdLzv89ZLr/MFKc/yU+ofMiN6W3HC6SXxUlhRP///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BJWOcByxnrWVDb+vxO0fi/zVPo/8pR3zxFy1yoRIhfzf///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wETSIEZJ2Kg10Fs4/85SNz/N1Wq8y1Oh6MZM3kr////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BAC5pAwk7dUEnZKH/QWzj/zlH3fU4Va2nLlGJMf///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEAMWwDBzp1VSdlov9CbeP3OUbhqThWsDH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////AQAxbAMLP3k1J2Of+UNv5bU6ReUx////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BCBdLAwwgVVckWJO7RHHoOf///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEMHlMHDR9VpR1Ef0////8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXQX///8B////AQ8lWwUPJVuDDiRZWf///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAmXQcQJ107ECddPRAnXQX///8BECheAxAnXTcPJVufECddJ////wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEQJ10TECZcURAnXV0QJ10rECZdA////wH///8BECddDxAnXXMQJ11nECdcK////wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BECddGxAnXF0QJ11PECddIRAnXQf///8B////Af///wEQJ10FECddURAnXVUQJ11TECddLf///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXR0QJ11jECddSRAnXRUQJ10D////Af///wH///8B////ARAnXQMQJ10tECdcVRAmXCUQJ11nECddN////wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wEQJl0hECddZRAnXUMQJ1wRECddA////wH///8B////Af///wH///8B////ARAnXQ8QJ11XECddNxAnXSkQJ11nECddRxAnXQn///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BECZdMRAnXWcQJl0/ECddD////wH///8B////Af///wH///8B////Af///wH///8BECddAxAnXSEQJ11pECZdHRAnXCMQJ11bECddXxAnXC0QJ10D////Af///wH///8B////Af///wH///8B////Af///wEQJ10HECddKxAnXFcQJ11nECddMxAnXAv///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BECddBxAnXTsQJ11rECddFxAnXRUQJl07ECZcZRAnXVcQJ11BECddMRAnXScQJ10jECddJxAnXS8QJ109ECddSxAnXVkQJ11hECddSRAnXR8QJ10H////Af///wH///8B////Af///wH///8B////Af///wH///8B////Af///wH///8BECddDRAnXUEQJ11tECddKxAnXQcQJ10VECddMRAnXUkQJ11PECddTxAnXU8QJlxPECddTRAnXUsQJl0/ECZcIxAnXREQJ10JECddA////wEQJ1wPECddOxAnXU8QJ11LECZdHxAnXQP///8B////Af///wH///8B////Af///wH///8BECddCxAnXDMQJl1vECddURAnXRcQJ10FECdcBxAnXQkQJ10JECdcCRAmXQkQJ10JECddBxAnXAcQJ10D////Af///wEQJ10lECddURAnXGUQJ11bECddQxAnXUEQJ10fECddA////wH///8B////Af///wH///8B////Af///wH///8BECddAxAnXRsQJ11bECddbRAnXVEQJ10tECddERAnXQP///8B////Af///wEQJ10HECddGRAnXTMQJ11LECddYxAnXWkQJ11PECddGRAnXQcQJ1wFECZcBRAnXQP///8B////Af///wH///8B////Af///wH///8B////Af///wH///8B////ARAnXQMQJ10XECdcSRAnXVkQJ11dECddWRAnXVEQJ11RECddUxAnXVsQJ11hECddVxAmXEcQJl0pECddCxAnXQP///8B////Af///wH///8B////Af///wH///8B////AQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"), default;
-webkit-overflow-scrolling: touch;
}
#app {
-webkit-tap-highlight-color: transparent;
}
svg {
width: 100vw;
height: 100vh;
max-height: 400px;
margin-left: 20vw;
}
p {
font-size: 16px;
color: white;
text-align: center;
}
.isFlipped {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
#leftarm {
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
@media screen and (max-width: 600px) {
svg {
max-height: 200px !important;
margin-left: 0 !important;
}
}
</style>
</head>
<body translate="no" >
<div id="app" @mousemove="coordinates">
<p>Move your mouse or tap</p>
<svg id="walle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 139.4 129.4">
<defs>
<clipPath id="clip-path" transform="translate(-81.8 -924.4)">
<circle cx="140.5" cy="978.2" r="4.3" fill="none"/>
</clipPath>
<clipPath id="clip-path-2" transform="translate(-81.8 -924.4)">
<path d="M148.5,976.5s1.3,5.2-3.2,6.7l3.4,3.6,9.3-2.1-5-8.3Z" fill="none"/>
</clipPath>
<clipPath id="clip-path-3" transform="translate(-81.8 -924.4)">
<circle cx="155.8" cy="983.6" r="4.3" fill="none"/>
</clipPath>
<clipPath id="clip-path-4" transform="translate(-81.8 -924.4)">
<path d="M130.4,1007.6s1.3-.4,1.9.7a1.5,1.5,0,0,1-.3,1.8c-.2.3-4.5,2.9-4.5,2.9l-20.6,13.7-3.5-6.4Z" fill="none"/>
</clipPath>
<clipPath id="clip-path-5" transform="translate(-81.8 -924.4)">
<path d="M150.6,1000s1.4.3,1.3,1.5a1.5,1.5,0,0,1-1.1,1.5c-.3.2-5.3.5-5.3.5l-24.6,2.3v-7.3Z" fill="none"/>
</clipPath>
</defs>
<g id="Layer_3" data-name="Layer 3">
<ellipse id="shadow" cx="71.5" cy="100.4" rx="26.5" ry="3.6" fill="#394848" opacity="0.35"/>
</g>
<g id="Layer_2" data-name="Layer 2">
<g class="head" v-bind:class="{isFlipped: flip}">
<g id="neck">
<g id="neckb">
<path d="M157.8,995.6a2.6,2.6,0,1,1-4.1-2.2,6.1,6.1,0,0,0-1.7-.3c-1-.2-.9-1.3-.8-1.8a1.6,1.6,0,0,1-.5-1.2,1.7,1.7,0,1,1,3.4,0,1.6,1.6,0,0,1-.5,1.2,5.8,5.8,0,0,0,1.7,1.8A2.6,2.6,0,0,1,157.8,995.6Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
<circle cx="70.6" cy="65.6" r="0.9" fill="#636767"/>
<circle cx="73.3" cy="71.2" r="1.6" fill="none" stroke="#636767" stroke-miterlimit="10" stroke-width="0.5"/>
</g>
<g id="neckf">
<path id="wire" d="M147.3,989.3s-2-1.9-.7-3.2l3.4-3.7.3.9s-2.6,2.5-3.2,3.3.9,2.5.9,2.5Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
<path fill="#a2b2b3" d="M64.6 67.1L65.3 67.6 69.3 67.5 69.6 67 64.6 67.1z"/>
<path d="M149.8,983.4l.2,2.6-1.9,2.3-1.7.2s-2.5,1.9.3,3.1h4.8s-1.9-2,.5-2.8l-1.5-.2,2.4-2.3L152,983Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
<path d="M147,992l4.1-.2,1.1,1.3h2.1a3,3,0,0,0-1.7,2.4h-7.6a2.6,2.6,0,0,1,2.3-2.6Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
</g>
</g>
<g id="eyecontain">
<g id="eyes" :style="{ transform:`translate3d(${x}px, ${y}px, 0)`}">
<g id="lefteye">
<path id="lefteyeb2" d="M143.8,972.7l-6.1,1.1a6.2,6.2,0,0,0-4.1,8s2.3,4.4,6.6,3.7l5.4-.6a5.7,5.7,0,0,0,4.4-6l-.6-4.1S148.7,971.8,143.8,972.7Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
<path id="lefteyeb1" d="M145.1,972.1l-8.1,1s-5.8,1.6-4.1,7.3a4.9,4.9,0,0,0,5.6,3.4l5.4-.6s4.6-.8,4.4-5.4l-.6-4.6S147.9,971.6,145.1,972.1Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
<g id="lefteyeball">
<circle cx="58.7" cy="53.8" r="4.3" fill="#0c1112"/>
<g clip-path="url(#clip-path)">
<circle id="ball" cx="59.7" cy="54.8" r="4.3" fill="#394848"/>
</g>
<circle id="glimmer" cx="61.5" cy="51.2" r="1.4" fill="#fff"/>
</g>
</g>
<g id="eyespace">
<g clip-path="url(#clip-path-2)">
<circle cx="66.4" cy="56.1" r="3.6" fill="#f49123"/>
</g>
</g>
<g id="righteye">
<path id="righteyeb2" d="M158.8,978.7l4.1,4.7a6.2,6.2,0,0,1-1.8,8.8s-4.5,2.1-7.4-1.2l-3.9-3.9a5.7,5.7,0,0,1,.2-7.4l3-2.8S155.5,974.9,158.8,978.7Z" transform="translate(-81.8 -924.4)" fill="#a2b2b3"/>
<path id="righteyeb1" d="M156.4,976l5.4,6.1s3.3,5-1.8,8.2a4.9,4.9,0,0,1-6.4-1.2l-3.7-4s-2.9-3.6.3-7l3.5-3.1S154.7,973.8,156.4,976Z" transform="translate(-81.8 -924.4)" fill="#ddeced"/>
<g id="righteyeball">
<circle cx="74" cy="59.2" r="4.3" fill="#0c1112"/>
<g clip-path="url(#clip-path-3)">
<circle id="ball-2" data-name="ball" cx="75" cy="60.2" r="4.3" fill="#394848"/>
</g>
<circle id="glimmer-2" data-name="glimmer" cx="74.7" cy="56.1" r="1.4" fill="#fff"/>
</g>
</g>
</g>
</g>
</g>
<g class="body">
<g id="backwheel">
<path d="M149.9,1007.2l-4.8-.2s-.6-.2-2,1.2l-12.5,12.7s-1.4,2.3.3,3.5a3.9,3.9,0,0,0,3.1.8h7.1Z" transform="translate(-81.8 -924.4)" fill="#394848"/>
<path d="M152.4,1009.2s-2-4.6-6.5-.1l-11,11.2s-3.8,4.1,1.4,4.8h16.2s7.8.2,5.5-7.4Z" transform="translate(-81.8 -924.4)" fill="#636767"/>
<path d="M151.7,.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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