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