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

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

代码语言：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);
        .........完整代码请登录后点击上方下载按钮下载查看