css布局实现一个可爱的章鱼跟随鼠标行走动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局实现一个可爱的章鱼跟随鼠标行走动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  --squigs1:"M 400 810 C 280 660 480 670 290 470 Q 240 380 260 260";
  --squigs2:"M 400 810 C 280 660 480 670 290 470 Q 240 380 260 260";
  --directionX:0%;
  --directionY:0%;
  --scale: 1;
  --angle: 20;
  cursor: pointer;
}
body:after {
  content: "click 4 squid";
  position: absolute;
  z-index: 99;
  bottom: 10px;
  width: 100%;
  left: 0;
  text-align: center;
  font-family: Futura;
  font-size: 10px;
  color: #1d5663;
}
body.squid {
  --scale: 0.5;
  --angle: 60;
}
body.squid #octo:before {
  transform: scaleY(1);
  transition-delay: 0.125s;
}
body.squid #octo .head {
  transform: scale(0.5) translateY(50px);
  transition-delay: 0s;
  filter: hue-rotate(200deg);
}
body.squid #octo .head:before {
  left: 5px;
  box-shadow: 80px 0 0 #414380;
  top: 70px;
}
body.squid #octo .head:after {
  background-position: 50% 50%;
  bottom: 5px;
}
body.squid #octo .wrap {
  filter: hue-rotate(200deg);
  transition-delay: 0s;
}
body:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  box-shadow: inset 0 0 50px 50px #76c5d6;
}
body #water {
  position: absolute;
  width: 300vw;
  height: 300vh;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: repeating-linear-gradient(-12deg, #62bdd0 2px, transparent 3px, transparent 20px, #76c5d6 22px), repeating-linear-gradient(22deg, transparent 50px, #76c5d6 100px, transparent 250px), repeating-linear-gradient(-22deg, #9dd6e2 50px, #76c5d6 100px, #9dd6e2 250px);
  -webkit-animation: waving 10s linear infinite;
          animation: waving 10s linear infinite;
  background-size: 25vw 100%;
}
@-webkit-keyframes waving {
  from {
    background-position: 0vw 0vh;
  }
  to {
    background-position: 100vw 50%;
  }
}
@keyframes waving {
  from {
    background-position: 0vw 0vh;
  }
  to {
    background-position: 100vw 50%;
  }
}
body #water:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: url(#waves);
          backdrop-filter: url(#waves);
  z-index: 9;
}
body #octo {
  position: absolute;
  z-index: 9;
  width: 800px;
  height: 800px;
  transform: translate(calc(var(--directionX)/10), calc(var(--directionY)/10)) rotate(var(--rotation));
  transform-origin: 50% calc(50% + 125px);
  cursor: pointer;
}
body #octo:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 125px;
  top: calc(50% - 150px);
  left: calc(50% - 25px);
  z-index: 11;
  background: repeating-linear-gradient(4deg, #fce8d6 20px, #fadbbe 26px, #fadbbe 27px, #fce8d6 34px, #fce8d6 50px);
  border-radius: 100px 100px 50px 50px/200px 200px 50px 50px;
  transition: 200ms cubic-bezier(0.275, 0.885, 0.32, 1);
  transition-delay: 0s;
  transform-origin: bottom;
  transform: scaleY(0);
}
body #octo .head {
  position: absolute;
  width: 100px;
  height: 90px;
  background: #c5c6e2;
  border-radius: 200%;
  left: calc(50% - 50px);
  top: calc(50% - 85px);
  z-index: 10;
  box-shadow: inset 0 10px 20px -10px #9294c8;
  -webkit-mask: linear-gradient(to bottom, #000 80px, transparent);
          mask: linear-gradient(to bottom, #000 80px, transparent);
  transition: 0.25s ease-in-out;
  transition-delay: 0.1s;
}
body #octo .head:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #414380;
  border-radius: 100px;
  top: 50px;
  left: 25px;
  box-shadow: 40px 0 0 #414380, -10px 17.5px 0 5px #b4b5d9, 50px 17.5px 0 5px #b4b5d9;
  transform: translate(calc((var(--directionX) * 3)), calc((var(--directionY) * 3) - 10px)) scale(0.9);
  transition: left 0.3s ease-in-out, box-shadow 0.3s ease-in-out, top 0.3s ease-in-out;
}
body #octo .head:after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 100px;
  bottom: 15px;
  left: calc(50% - 5px);
  border: 2px solid;
  box-sizing: border-box;
  border-color: transparent #414380 #414380 transparent;
  transform: translate(calc((var(--directionX) * 3)), calc((var(--directionY) * 3) - 10px)) scale(1.5) rotate(45deg);
  background: linear-gradient(135deg, transparent 50%, #414380 50%) calc(50% + 100px) 50%/100% 100% no-repeat;
  transition: background-position 0.3s ease-in-out, bottom 0.3s ease-in-out;
}
body .wrap {
  position: absolute;
  z-index: 9;
  width: 800px;
  height: 800px;
  top: calc(50% - 800px);
  transform-origin: bottom;
  transition-delay: 0.3s;
}
body .wrap:nth-of-type(3n) .inner {
  transform: scaleX(1);
}
body .wrap:nth-of-type(3n) .inner .pod {
  offset-path: path(var(--squigs2));
}
body .wrap .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transform: scaleX(-1);
}
body .wrap:nth-of-type(1) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 1deg + 100deg));
  -webkit-animation: waving1 3s ease-in-out infinite alternate;
          animation: waving1 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -0.6666666667s;
          animation-delay: -0.6666666667s;
}
@-webkit-keyframes waving1 {
  to {
    transform: scale(0.25) rotate(138deg);
  }
}
@keyframes waving1 {
  to {
    transform: scale(0.25) rotate(138deg);
  }
}
body .wrap:nth-of-type(1):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(88deg) scaleX(-1);
  -webkit-animation: waving21 2s ease-in-out infinite alternate;
          animation: waving21 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -1.5s;
          animation-delay: -1.5s;
}
body .wrap:nth-of-type(1):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving21 {
  to {
    transform: scale(0.25) rotate(108deg) scaleX(-1);
  }
}
@keyframes waving21 {
  to {
    transform: scale(0.25) rotate(108deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(2) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 2deg + 100deg));
  -webkit-animation: waving2 3s ease-in-out infinite alternate;
          animation: waving2 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -1.3333333333s;
          animation-delay: -1.3333333333s;
}
@-webkit-keyframes waving2 {
  to {
    transform: scale(0.25) rotate(156deg);
  }
}
@keyframes waving2 {
  to {
    transform: scale(0.25) rotate(156deg);
  }
}
body .wrap:nth-of-type(2):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(106deg) scaleX(-1);
  -webkit-animation: waving22 2s ease-in-out infinite alternate;
          animation: waving22 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
body .wrap:nth-of-type(2):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving22 {
  to {
    transform: scale(0.25) rotate(126deg) scaleX(-1);
  }
}
@keyframes waving22 {
  to {
    transform: scale(0.25) rotate(126deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(3) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 3deg + 100deg));
  -webkit-animation: waving3 3s ease-in-out infinite alternate;
          animation: waving3 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -2s;
          animation-delay: -2s;
}
@-webkit-keyframes waving3 {
  to {
    transform: scale(0.25) rotate(174deg);
  }
}
@keyframes waving3 {
  to {
    transform: scale(0.25) rotate(174deg);
  }
}
body .wrap:nth-of-type(3):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(124deg) scaleX(-1);
  -webkit-animation: waving23 2s ease-in-out infinite alternate;
          animation: waving23 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -2.5s;
          animation-delay: -2.5s;
}
body .wrap:nth-of-type(3):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving23 {
  to {
    transform: scale(0.25) rotate(144deg) scaleX(-1);
  }
}
@keyframes waving23 {
  to {
    transform: scale(0.25) rotate(144deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(4) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 4deg + 100deg));
  -webkit-animation: waving4 3s ease-in-out infinite alternate;
          animation: waving4 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -2.6666666667s;
          animation-delay: -2.6666666667s;
}
@-webkit-keyframes waving4 {
  to {
    transform: scale(0.25) rotate(192deg);
  }
}
@keyframes waving4 {
  to {
    transform: scale(0.25) rotate(192deg);
  }
}
body .wrap:nth-of-type(4):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(142deg) scaleX(-1);
  -webkit-animation: waving24 2s ease-in-out infinite alternate;
          animation: waving24 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -3s;
          animation-delay: -3s;
}
body .wrap:nth-of-type(4):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving24 {
  to {
    transform: scale(0.25) rotate(162deg) scaleX(-1);
  }
}
@keyframes waving24 {
  to {
    transform: scale(0.25) rotate(162deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(5) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 5deg + 100deg));
  -webkit-animation: waving5 3s ease-in-out infinite alternate;
          animation: waving5 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -3.3333333333s;
          animation-delay: -3.3333333333s;
}
@-webkit-keyframes waving5 {
  to {
    transform: scale(0.25) rotate(210deg);
  }
}
@keyframes waving5 {
  to {
    transform: scale(0.25) rotate(210deg);
  }
}
body .wrap:nth-of-type(5):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(160deg) scaleX(-1);
  -webkit-animation: waving25 2s ease-in-out infinite alternate;
          animation: waving25 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -3.5s;
          animation-delay: -3.5s;
}
body .wrap:nth-of-type(5):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving25 {
  to {
    transform: scale(0.25) rotate(180deg) scaleX(-1);
  }
}
@keyframes waving25 {
  to {
    transform: scale(0.25) rotate(180deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(6) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 6deg + 100deg));
  -webkit-animation: waving6 3s ease-in-out infinite alternate;
          animation: waving6 3s ease-in-out infinite alternate;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
@-webkit-keyframes waving6 {
  to {
    transform: scale(0.25) rotate(228deg);
  }
}
@keyframes waving6 {
  to {
    transform: scale(0.25) rotate(228deg);
  }
}
body .wrap:nth-of-type(6):nth-of-type(even) {
  z-index: -1;
  transform: scale(0.135) rotate(178deg) scaleX(-1);
  -webkit-animation: waving26 2s ease-in-out infinite alternate;
          animation: waving26 2s ease-in-out infinite alternate;
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}
body .wrap:nth-of-type(6):nth-of-type(even) .pod {
  offset-path: path(var(--squigs2));
  background: linear-gradient(45deg, #9294c8 25%, #8183bf 75%);
}
@-webkit-keyframes waving26 {
  to {
    transform: scale(0.25) rotate(198deg) scaleX(-1);
  }
}
@keyframes waving26 {
  to {
    transform: scale(0.25) rotate(198deg) scaleX(-1);
  }
}
body .wrap:nth-of-type(7) {
  z-index: 2;
  transform: scale(0.25) rotate(calc((360/var(--angle)) * 7deg + 100deg));
  -webkit-animation: waving7 3s ease-in-out infinite alternate;
     .........完整代码请登录后点击上方下载按钮下载查看