js+css实现一个盯着鼠标的青蛙效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现一个盯着鼠标的青蛙效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
  
<style>
:root {
  --scale-x: 1;
  --scale-y: 1;
  --pos-x: .5;
  --pos-y: .5;
  --pos-x-from-center: 0;
  --pos-y-from-center: 0;
  --body-rotation: calc( var(--pos-x-from-center) * 5deg) ;
  --color-bg: #e6ead2;
  --color-skin-light: #cae256;
  --color-skin-medium: #8fd747;
  --color-skin-dark: #00929a;
  --color-skin-belly: #ffffff;
  --color-dark: #002522;
  --color-light: #ffffff;
  --color-feet: #fdb83a;
  --color-eyeball: #eb5530;
  --color-shadow: rgba(0,0,100,.075);
}

* {
  box-sizing: border-box;
}

body {
  background: var(--color-bg);
  overflow: hidden;
}

.container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 45vh;
  background: #f0f2e3;
}

.frog {
  width: 50vw;
  min-width: 300px;
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  z-index: 1;
}
.frog:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 30%;
}
.frog:after {
  content: "";
  display: block;
  height: 50%;
  width: 100%;
  position: absolute;
  top: 100%;
  z-index: -3;
  background: var(--color-bg);
  border-bottom-right-radius: 50% 100%;
  border-bottom-left-radius: 50% 100%;
}

.body {
  --body-rotation: calc( var(--pos-x-from-center) * 5deg) ;
  width: 40%;
  height: 100%;
  position: absolute;
  bottom: -5%;
  left: 50%;
  background: linear-gradient(var(--color-shadow), var(--color-shadow)), linear-gradient(var(--color-shadow), var(--color-shadow)), var(--color-skin-belly);
  transform: translateX(-50%) rotate(var(--body-rotation));
  border-bottom-left-radius: 50% 200%;
  border-bottom-right-radius: 50% 200%;
  animation: infinite body-breathing 2000ms ease;
}

.leg {
  width: 15%;
  height: 150%;
  position: absolute;
  border-radius: 100% 100% 0 0;
  z-index: -1;
  bottom: 0;
  background: var(--color-skin-dark) linear-gradient(var(--leg-bg-direction), transparent, transparent 80%, var(--color-shadow) 80%);
}

.leg.left {
  --leg-bg-direction: to left;
  left: 40%;
  transform: rotate(calc( ( ( var(--pos-x-from-center) * 15 ) - 70) * 1deg ));
  transform-origin: bottom left;
}

.leg.right {
  --leg-bg-direction: to right;
  right: 40%;
  transform: rotate(70deg);
  transform: rotate(calc( ( ( var(--pos-x-from-center) * 15 ) + 70) * 1deg ));
  transform-origin: bottom right;
}

.foot {
  position: absolute;
  inset: var(--foot-inset);
  height: 110%;
  width: 40%;
}
.foot:after {
  content: "";
  display: block;
  position: absolute;
  background: var(--color-skin-dark);
  width: 100%;
  padding-top: 100%;
  border-radius: 100%;
}

.left .foot {
  --foot-rotation: rotate( calc( ( ( var(--pos-x-from-center) * 15 ) + 20) * -1deg ) );
  --foot-translation: translateY( calc( var(--pos-x-from-center) * -2% ) );
  transform-origin: bottom left;
  border-top-right-radius: 100% 15%;
  background: var(--color-skin-dark) linear-gradient(to left, transparent, transparent 80%, var(--color-shadow) 80%);
  bottom: 0;
  transform: var(--foot-rotation) var(--foot-translation);
}
.left .foot:after {
  right: 50%;
}

.right .foot {
  --foot-rotation: rotate( calc( ( ( var(--pos-x-from-center) * 15 ) - 20) * -1deg ) );
  --foot-translation: translateY( calc( var(--pos-x-from-center) * 2% ) );
  transform-origin: bottom right;
  border-top-left-radius: 100% 15%;
  background: var(--color-skin-dark) linear-gradient(to right, transparent, transparent 80%, var(--color-shadow) 80%);
  bottom: 0;
  right: 0;
  transform: var(--foot-rotation) var(--foot-translation);
}
.right .foot:after {
  left: 50%;
}

.arm {
  --elbow-rotation: 0;
  --offset: 10%;
  width: 10%;
  height: 50%;
  background: var(--color-skin-light);
  position: absolute;
  top: 75%;
  background: linear-gradient(var(--arm-gradient-direction), var(--color-skin-light), var(--color-skin-light) 70%, var(--color-skin-medium) 70%);
}
.arm:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 100%;
  width: 60%;
  height: 170%;
  background: var(--color-skin-light);
  transform: rotate(45deg);
  transform: rotate(var(--elbow-rotation));
  border-radius: 25% 25% 100% 100%;
}

.left.arm {
  --arm-rotation: calc( var(--pos-x-from-center) * -10deg);
  --arm-gradient-direction: to right;
  --elbow-rotation: calc( ( var(--pos-x-from-center) + 60) * 1deg);
  left: var(--offset);
  border-radius: 50% 0 0 50%;
  transform: rotate(var(--arm-rotation));
}
.left.arm:before {
  left: 0;
  transform-origin: bottom left;
}

.right.arm {
  --arm-rotation: calc( var(--pos-x-from-center) * 10deg);
  --arm-gradient-direction: to left;
  --elbow-rotation: calc( ( var(--pos-x-from-center) + 60) * -1deg);
  right: var(--offset);
  border-radius: 0 50% 50% 0;
  transform: rotate(var(--arm-rotation));
}
.right.arm:before {
  right: 0;
  transform-origin: bottom right;
}

.hand {
  width: 100%;
  padding-top: 100%;
  background: var(--color-feet);
  position: absolute;
  top: 50%;
  transform: var(--hand-rotation);
  z-index: -2;
}

.left .hand {
  --hand-rotation: rotate( calc( (var(--pos-x-from-center) + 10) * -2deg) );
  right: 0;
  border-radius: 100% 0 0 0;
  transform-origin: top right;
}

.right .hand {
  --hand-rotation: rotate( calc( (var(--pos-x-from-center) - 10) * -2deg) ) ;
  left: 0;
  border-radius: 0 100% 0 0;
  transform-origin: top left;
}

.finger {
  height: 200%;
  width: 40%;
  background: var(--color-feet);
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -20%;
  transform-origin: top center;
}
.finger:after {
  content: "";
  display: block;
  width: 150%;
  padding-top: 150%;
  background: var(--color-feet);
  position: absolute;
  top: 100%;
  left: 50%;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 -0.5vw 0 0.25vw var(--color-shadow);
}
.finger:first-child {
  height: 150%;
  transform: rotate(30deg);
}
.finger:last-child {
  height: 150%;
  transform: rotate(-30deg);
}

.head {
  --head-translation: calc( var(--pos-y-from-center) * -10%);
  width: 40%;
  padding-top: 20%;
  color: var(--color-skin-light);
  background: var(--color-skin-medium);
  border-radius: 25% 25% 0 0;
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%) translateY(var(--head-translation)) rotate(calc( var(--pos-x-from-center) * 10deg));
}
.head:before {
  content: "";
  display: block;
  width: 120%;
  height: 75%;
  background: linear-gradient(var(--color-shadow), var(--color-shadow)), var(--color-skin-belly);
  position: absolute;
  top: 50%;
  left: 50%;.........完整代码请登录后点击上方下载按钮下载查看