css实现可交互可爱卡通猫咪动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现可交互可爱卡通猫咪动画效果代码

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

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">

    <style>
        .cat {
        width:500px;
        margin:0 auto;
        position:relative;
        cursor:pointer;
}
.head_content {
        position:absolute;
        top:100px;
}
.ear_left {
        width:100px;
        height:150px;
        background-color:#FCEDBC;
        border-radius:50% / 10%;
        position:absolute;
        top:22px;
        left:16px;
        transform:rotate(-20deg);
}
.ear_right {
        width:100px;
        height:150px;
        background-color:#FCEDBC;
        border-radius:50% / 10%;
        position:absolute;
        top:22px;
        left:227px;
        transform:rotate(20deg);
}
.head {
        width:345px;
        height:270px;
        background-color:#FFF5D7;
        -webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
        border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
        position:absolute;
        top:0;
}
.brow_left {
        width:44px;
        height:20px;
        border:1px solid transparent;
        border-top:2px solid #000;
        border-radius:50%/35%;
        position:absolute;
        top:49px;
        left:60px;
        transform:rotate(-37deg);
}
.brow_right {
        width:44px;
        height:20px;
        border:1px solid transparent;
        border-top:2px solid #000;
        border-radius:50%/35%;
        position:absolute;
        top:49px;
        left:240px;
        transform:rotate(37deg);
}
.eye_left {
        width:70px;
        height:70px;
        background:#fff;
        border:1px solid #000;
        border-radius:50%;
        position:absolute;
        top:67px;
        left:70px;
}
.eye_right {
        width:70px;
        height:70px;
        background:#fff;
        border:1px solid #000;
        border-radius:50%;
        position:absolute;
        top:67px;
        left:205px;
}
.pupil {
        width:38px;
        height:38px;
        background:#000;
        border-radius:50%;
        position:absolute;
        top:7px;
        left:30px;
}
.beard_left1 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:158px;
        left:-50px;
        transform:rotate(10deg);
}
.beard_left2 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:187px;
        left:-60px;
        transform:rotate(-7deg);
}
.beard_left3 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:208px;
        left:-50px;
        transform:rotate(-16deg);
}
.beard_right1 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:158px;
        left:300px;
        transform:rotate(-10deg);
}
.beard_right2 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:187px;
        left:310px;
        transform:rotate(7deg);
}
.beard_right3 {
        width:95px;
        border-top:1px solid #000;
        position:absolute;
        top:208px;
        left:300px;
        transform:rotate(16deg);
}
.nose {
        width:20px;
        height:10px;
        background-color:#000;
        border-radius:50%/40%;
        position:absolute;
        top:142px;
        left:161px;
}
.mouse {
        position:absolute;
        top:152px;
        left:171px;
}
.mouse_top {
        height:10px;
        border-left:1px solid #000;
        position:absolute;
        top:0;
        left:0;
}
.mouse_left {
        width:100px;
        height:100px;
        border:1px solid transparent;
        border-bottom:1px solid #000;
        border-radius:50%;
        position:absolute;
        top:-78px;
        left:-86px;
}
.mouse_right {
        width:100px;
        height:100px;
        border:1px solid transparent;
        border-bottom:1px solid #000;
        border-radius:50%;
        position:absolute;
        top:-78px;
        left:-14px;
}
.mouse_bottom {
        width:20px;
        height:20px;
        border:1px solid transparent;
        border-bottom:1px solid #000;
        border-right:1px solid #000;
        position:absolute;
        top:8px;
        left:-9px;
        transform:rotate(45deg);
}
.mouse_bottom_show {
        width:100px;
        height:100px;
        border:1px solid transparent;
        border-bottom:1px solid #000;
        border-radius:50%;
        position:absolute;
        top:-63px;
        left:-49px;
        display:none;
}
.miao {
        position:absolute;
        top:-5px;
        left:52px;
        font-size:20px;
        opacity:0;
        color:#FD7055;
}
@keyframes miaoAnim {
        0% {
        opacity:0;
        top:-5px;
        left:.........完整代码请登录后点击上方下载按钮下载查看