Tone.js+css实现可爱卡通熊猫眼睛跟随鼠标交互效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：Tone.js+css实现可爱卡通熊猫眼睛跟随鼠标交互效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html,body {
        	height:100%;
        }
        body {
        	align-items:center;
        	background-color:wheat;
        	display:flex;
        	justify-content:center;
        	overflow:hidden;
        }
        .container {
        	border-radius:50%;
        	margin:1em auto;
        	align-items:center;
        	width:90vh;
        	height:90vh;
        	display:flex;
        	justify-content:center;
        	overflow:hidden;
        	position:relative;
        	-webkit-transform:translate3d(0,0,0);
        	transform:translate3d(0,0,0);
        }
        .center {
        	align-items:center;
        	background-color:wheat;
        	border-radius:50%;
        	box-shadow:inset 0px 0px 50px -5px rgba(0,0,0,0.45);
        	display:flex;
        	height:75%;
        	justify-content:center;
        	position:relative;
        	overflow:hidden;
        	width:75%;
        	z-index:10;
        }
        .panda {
        	width:80%;
        	z-index:10;
        }
        .body {
        	position:absolute;
        	width:85%;
        	height:85%;
        	background:black;
        	border-radius:50%;
        	pointer-events:none;
        	top:50%;
        }
        .chest {
        	position:absolute;
        	width:70%;
        	height:70%;
        	background:white;
        	border-radius:50%;
        	pointer-events:none;
        	top:85%;
        }
        .key {
        	overflow:hidden;
        	position:absolute;
        	top:0;
        	right:0;
        	-webkit-transform-origin:0% 100%;
        	transform-origin:0% 100%;
        	width:50%;
        	height:50%;
        	transition:background 100ms ease-in-out;
        }
        .key:before {
        	border-radius:50%;
        	content:'';
        	display:block;
        	height:200%;
        	left:-100%;
        	position:absolute;
        	text-align:center;
        	width:200%;
        }
        .key:nth-child(1) {
        	background:#40a4d8;
        	-webkit-transform:rotate(-45deg) skewX(-45deg);
        	transform:rotate(-45deg) skewX(-45deg);
        	z-index:8;
        }
        .key:nth-child(1):hover {
        	background:#80c2e5;
        }
        .key:nth-child(2) {
        	background:#b2c225;
        	-webkit-transform:rotate(0deg) skewX(-45deg);
        	transform:rotate(0deg) skewX(-45deg);
        	z-index:7;
        }
        .key:nth-child(2):hover {
        	background:#d1df55;
        }
        .key:nth-child(3) {
        	background:#fecc2f;
        	-webkit-transform:rotate(45deg) skewX(-45deg);
        	transform:rotate(45deg) skewX(-45deg);
        	z-index:6;
        }
        .key:nth-child(3):hover {
        	background:#fedf7b;
        }
        .key:nth-child(4) {
        	background:#f9a228;
        	-webkit-transform:rotate(90deg) skewX(-45deg);
        	transform:rotate(90deg) skewX(-45deg);
        	z-index:5;
        }
        .key:nth-child(4):hover {
        	background:#fbc272;
        }
        .key:nth-child(5) {
        	background:#f6621f;
        	-webkit-transform:rotate(135deg) skewX(-45deg);
        	transform:rotate(135deg) skewX(-45deg);
        	z-index:4;
        }
        .key:nth-child(5):hover {
        	background:#f99669;
        }
        .key:nth-child(6) {
        	background:#db3838;
        	-webkit-transform:rotate(180deg) skewX(-45deg);
        	transform:rotate(180deg) skewX(-45deg);
        	z-index:4;
        }
        .key:nth-child(6):hover {
        	background:#e77979;
        }
        .key:nth-child(7) {
        	background:#ee657a;
        	-webkit-transform:rotate(225deg) skewX(-45deg);
        	transform:rotate(225deg) skewX(-45deg);
        	z-index:3;
        }
        .key:nth-child(7):hover {
        	background:#f6aab6;
        }
        .key:nth-child(8) {
        	background:#a363d9;
        	-webkit-transform:rotate(270deg) skewX(-45deg);
        	transform:rotate(270deg) skewX(-45deg);
        	z-index:2;
        }
        .key:nth-child(8):hover {
        	background:#c7a1e8;
        }
        .mouth {
        	transition:ry 150ms ease;
        }
        .idle .feature {
        	-webkit-animation:idleFace 3s ease-in-out infinite alternate;
        	animation:idleFace 3s ease-in-out infinite alternate;
        }
        .idle .ear {
        	-webkit-animation:idleEars 3s ease-in-out infinite alternate;
        	animation:idleEars 3s ease-in-out infinite alternate;
        }
        .idle .eye {
        	-webkit-animation:idleFace 3s ease-in-out infinite alternate;
        	animation:idleFace 3s ease-in-out infinite alternate;
        }
        .idle .mouth {
        	-webkit-transform:scaleX(1.3) scaleY(2);
        	transform:scaleX(1.3) scaleY(2);
        	-webkit-animation:idleMouth 3s ease-in-out infinite alternate;
        	animation:idleMouth 3s ease-in-out infinite alternate;
        	-webkit-transform-origin:center 80%;
        	transform-origin:center 80%;
        }
        @-webkit-keyframes idleMouth {
        	20% {
        	-webkit-transform:scaleX(1.3) scaleY(2);
        	transform:scaleX(1.3) scaleY(2);
        }
        90% {
        	-webkit-transform:scaleX(0.7);
        	transform:scaleX(0.7);
        }
        100% {
        	-webkit-transform:scaleX(0.7);
        	transform:scaleX(0.7);
        }
        }@keyframes idleMouth {
        	20% {
        	-webkit-transform:scaleX(1.3) scaleY(2);
        	transform:scaleX(1.3) scaleY(2);
        }
        90% {
        	-webkit-transform:scaleX(0.7);
        	transform:scaleX(0.7);
        }
        100% {
        	-webkit-transform:scaleX(0.7);
        	transform:scaleX(0.7);
        }
        }@-webkit-keyframes idleFace {
        	20% {
        	-webkit-transform:translateY(0);
        	transform:translateY(0);
        }
        80% {
        	-webkit-transform:translateY(7px);
        	transform:translateY(7px);
        }
        100% {
        	-webkit-transform:translateY(7px);
        	transform:translateY(7px);
        }
        }@keyframes idleFace {
        	20% {
        	-webkit-transform:translateY(0);
        	transform:translateY(0);
        }
        80% {
        	-webkit-transform:translateY(7px);
        	transform:translateY(7px);
        }
        100% {
        	-webkit-transform:translateY(7px);
        	transform:translateY(7px);
        }
        }@-webkit-keyframes idleEars {
        	20% {
        	-webkit-transform:translateY(0);
        	transform:translateY(0);
        }
        80% {
        	-webkit-transform:translateY(-5px);
        	transform:translateY(-5px);
        }
        100% {
        	-webkit-transform:translateY(-5px);
        	transform:translateY(-5px);
        }
        }@keyframes idleEars {
        	20% {
        	-webkit-transform:translateY(0);
        	transform:translateY(0);
        }
        80% {
        	-webkit-transform:translateY(-5px);
        	transform:translateY(-5px);
        }
        100% {
        	-webkit-transform:translateY(-5px);
        	transform:translateY(-5px);
        }
        }.twitter__link {
        	cursor:pointer;
        	position:absolute;
        	right:10px;
        	top:12px;
        	z-index:-1;
        	background:#00aced;
        	border-radius:20px;
        	height:30px;
        	text-decoration:none;
        	padding-righ.........完整代码请登录后点击上方下载按钮下载查看