gsap的老鼠转圈发电动画效果
代码语言：html
所属分类：动画
代码描述：gsap的老鼠转圈发电动画效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
:root {
--size: 100;
--unit: calc((var(--size) / 300) * 1vmin);
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #c1f2ee;
}
.container {
height: calc(250 * var(--unit));
width: calc(250 * var(--unit));
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container svg {
height: 60%;
}
.container svg #eyelid {
opacity: 0;
}
</style>
</head>
<body translate="no">
<div class="container">
<svg viewBox="0 0 661 650" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect id="Rectangle 12" x="23.3345" y="649.553" width="33" height="467" rx="16.5" transform="rotate(-135 23.3345 649.553)" fill="#C4C4C4" />
<rect id="Rectangle 13" x="660.553" y="626.219" width="33" height="467" rx="16.5" transform="rotate(135 660.553 626.219)" fill="#C4C4C4" />
<g id="hamster">
<path class="leg" id="front" d="M201.898 536.027C207.23 534.506 212.631 530.784 216.763 525.273C224.801 514.553 224.997 501.124 217.201 495.278C209.405 489.433 196.569 493.384 188.531 504.103C185.841 507.69 184.03 511.58 183.102 515.387C177.245 514.978 172.562 516.638 171.309 520.058C169.484 525.042 175.635 531.877 185.047 535.324C191.594 537.721 197.994 537.849 201.898 536.027Z" fill="#FF9820" />
<path class="leg" id="back" d="M362.067 573.277C366.151 569.526 369.31 563.778 370.533 556.999C372.912 543.814 367.067 531.722 357.478 529.992C347.888 528.261 338.186 537.548 335.806 550.733C335.01 555.145 335.135 559.434 336.012 563.253C330.593 565.513 327.152 569.096 327.565 572.715C328.168 577.988 336.73 581.34 346.689 580.202C353.615 579.411 359.393 576.655 362.067 573.277Z" fill="#FF9820" />
<path class="leg" id="back" d="M238.625 550.054C242.942 546.575 246.466 541.043 248.124 534.357C251.349 521.353 246.296 508.909 236.838 506.563C227.38 504.218 217.099 512.859 213.874 525.863C212.795 530.214 212.642 534.503 213.271 538.371C207.718 540.276 204.052 543.63 204.231 547.268C204.492 552.569 212.82 556.466 222.832 555.973C229.795 555.63 235.739 553.253 238.625 550.054Z" fill="#F5A64A" />
<path class="leg" id="front" d="M399.206 559.951C400.506 554.561 399.924 548.028 397.162 541.718C391.787 529.445 380.194 522.664 371.268 526.573C362.342 530.481 359.463 543.599 364.837 555.873C366.635 559.979 369.13 563.471 371.987 566.153C368.748 571.05 367.888 575.943 370.248 578.717C373.688 582.759 382.665 580.769 390.298 574.273C395.608 569.755 398.869 564.247 399.206 559.951Z" fill="#F5A64A" />
<ellipse id="back-ear" cx="232.456" cy="335.035" rx="17.6437" ry="24.2601" transform="rotate(11.9419 232.456 335.035)" fill="#FF9820" />
<path d="M319.561 545.29C393.573 548.576 469.644 508.101 472.893 434.925C476.142 361.749 402.295 352.136 328.283 348.85C313.344 348.186 297.81 345.874 282.418 343.583C245.113 338.03 208.648 332.602 183.54 351.083C157.148 366.464 142.118 367.454 133.387 368.028C122.808 368.725 121.479 368.812 120.398 393.16C119.254 418.935 134.948 436.547 154.803 444.687C170.67 504.247 253.978 542.378 319.561 545.29Z" fill="#F5A64A" />
<path d="M439.663 471.579C426.129 496.596 414.337 496.479 380.773 478.321C347.209 460.163 322.344 440.447 335.879 415.43C349.413 390.414 396.221 369.571 429.784 387.729C463.348 405.887 453.198 446.563 439.663 471.579Z" fill="white" />
<circle id="nose" cx="128.838" cy="372.16" r="7.5" transform="rotate(2.54233 128.838 372.16)" fill="#FFC0C0" />
<g id="eye">
<circle cx="213.533" cy="380.925" r="23.5" transform="rotate(2.54233 213.533 380.925)" fill="#3D3D3D" />
<circle cx="208.83" cy="373.247" r="8" transform="rotate(2.54233 208.83 373.247)" fill="white" />
</g>
<ellipse id="eyelid" cx="214.368" cy="378.246" rx="28.1322" ry="26.5656" transform="rotate(13.4897 214.368 378.246)" fill="#F5A64A" />
<g id="front-ear">
<ellipse cx="252.865" cy="339.073" rx="17.6437" ry="24.2601" transform="rotate(35.1551 252.865 339.073)" fill="#F5A64A" />
<ellipse cx="250.619" cy="338.99" rx="12" ry="16.5" transform="rotate(35.1551 250.619 338.99)" fill="white" />
</g>
</g>
<g id="hamster2">
<path class="leg" id="front" d="M201.898 536.027C207.23 534.506 212.631 530.784 216.763 525.273C224.801 514.553 224.997 501.124 217.201 495.278C209.405 489.433 196.569 493.384 188.531 504.103C185.841 507.69 184.03 511.58 183.102 515.387C177.245 514.978 172.562 516.638 171.309 520.058C169.484 525.042 175.635 531.877 185.047 535.324C191.594 537.721 197.994 537.849 201.898 536.027Z" fill="#4e515e" />
<path class="leg" id="back" d="M362.067 573.277C366.151 569.526 369.31 563.778 370.533 556.999C372.912 543.814 367.067 531.722 357.478 529.992C347.888 528.261 338.186 537.548 335.806 550.733C335.01 555.145 335.135 559.434 336.012 563.253C330.593 565.513 327.152 569.096 327.565 572.715C328.168 577.988 336.73 581.34 346.689 580.202C353.615 579.411 359.393 576.655 362.067 573.277Z" fill="#4e515e" />
<path class="leg" id="back" d="M238.625 550.054C242.942 546.575 246.466 541.043 248.124 534.357C251.349 521.353 246.296 508.909 236.838 506.563C227.38 504.218 217.099 512.859 213.874 525.863C212.795 530.214 212.642 534.503 213.271 538.371C207.718 540.276 204.052 543.63 204.231 547.268C204.492 552.569 212.82 556.466 222.832 555.973C229.795 555.63 235.739 553.253 238.625 550.054Z" fill="#727687" />
<path class="leg" id="front" d="M399.206 559.951C400.506 554.561 399.924 548.028 397.162 541.718C391.787 529.445 380.194 522.664 371.268 526.573C362.342 530.481 359.463 543.599 364.837 555.873C366.635 559.979 369.13 563.471 371.987 566.153C368.748 571.05 367.888 575.943 370.248 578.717C373.688 582.759 382.665 580.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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