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%;
}
.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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0