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

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

代码语言：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%;
}

.bo.........完整代码请登录后点击上方下载按钮下载查看