gsap的老鼠转圈发电动画效果-html代码-BFW代码库

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.5.........完整代码请登录后点击上方下载按钮下载查看