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