div+css实现卡通小伙和猫在沙发下晚上玩电脑敲键盘动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现卡通小伙和猫在沙发下晚上玩电脑敲键盘动画代码

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

<html lang="en">

<head>
    <style>
        *,*:before,*:after {
                box-sizing:border-box
        }
        body {
                display:flex;
                justify-content:center;
                align-items:center;
                height:100vh;
                background:#121317
        }
        .wrapper {
                position:relative;
                width:300px
        }
        .wrapper:before {
                content:"";
                background:rgba(255,255,255,0.04);
                width:350px;
                height:350px;
                border-radius:50%;
                position:absolute;
                left:50%;
                top:-95%;
                transform:translate(-50%);
                box-shadow:0 0 0 50px rgba(255,255,255,0.01)
        }
        .sofa {
                position:relative;
                width:265px;
                height:95px;
                background:#FFD100;
                border-radius:35px 35px 0 0;
                border:1px solid #180C0B;
                box-shadow:inset 30px 0 #EFBB02;
                filter:brightness(0.8)
        }
        .sofa:after {
                content:"";
                width:130px;
                height:70px;
                background:#EFBB02;
                border-radius:25px;
                position:absolute;
                bottom:-40px;
                right:0;
                transform:translatex(40%);
                border:1px solid #180C0B;
                box-shadow:inset -30px 0 0 3px #FFD100
        }
        .sofa .sofa-cushion {
                width:300px;
                height:40px;
                border-radius:30px;
                background:#FFD100;
                border:1px solid #180C0B;
                position:absolute;
                z-index:1;
                bottom:-40px;
                left:50%;
                transform:translatex(-50%);
                box-shadow:inset -150px 0 #EFBB02
        }
        .sofa .sofa-cushion:after {
                content:"";
                width:130px;
                height:70px;
                background:#EFBB02;
                border-radius:25px;
                position:absolute;
                bottom:-1px;
                left:-10px;
                border:1px solid #180C0B;
                box-shadow:inset -30px 0 0 3px #FFD100
        }
        .sofa .sofa-bottom-l,.sofa .sofa-bottom-r {
                width:20px;
                height:40px;
                background:#CEA77A;
                position:absolute;
                bottom:-79px;
                border:1px solid #180C0B;
                transform:skew(-30deg);
                box-shadow:inset 5px 10px #B2906A
        }
        .sofa .sofa-bottom-l:after,.sofa .sofa-bottom-r:after {
                content:"";
                width:20px;
                height:40px;
                background:#CEA77A;
                position:absolute;
                bottom:-1px;
                border:1px solid #180C0B;
                transform:skew(50deg);
                box-shadow:inset -5px 10px #B2906A
        }
        .sofa .sofa-bottom-r {
                right:-20px;
                transform:skew(30deg)
        }
        .sofa .sofa-bottom-r:after {
                right:70px;
                transform:skew(-50deg)
        }
        .sofa .sofa-bottom-l:after {
                left:70px
        }
        .cat {
                position:absolute;
                z-index:1;
                width:75px;
                height:50px;
                border-radius:50%;
                border:1px solid #180C0B;
                background:#D3D2D4;
                bottom:-15px;
                right:93px;
                box-shadow:inset 14px -33px #fff
        }
        .cat:after {
                content:"";
                background:#FFD100;
                border:1px solid #180C0B;
                width:150px;
                height:40px;
                position:absolute;
                bottom:-25px;
                border-radius:0 50px 50px 100px
        }
        .cat .cat-head {
                position:absolute;
                width:45px;
                height:45px;
                border-radius:50%;
                border:1px solid #180C0B;
                background:#fff;
                bottom:5px;
                right:-10px;
                transform:rotate(-14deg);
                -webkit-animation:sleep 2s infinite alternate linear;
                animation:sleep 2s infinite alternate linear
        }
        .cat .cat-head .cat-ear-l,.cat .cat-head .cat-ear-r {
                position:absolute;
                width:25px;
                height:13px;
                border-radius:50%;
                border:1px solid #180C0B;
                background:#fff;
                top:-5px
        }
        .cat .cat-head .cat-ear-l:after,.cat .cat-head .cat-ear-r:after {
                content:"";
                width:9px;
                height:19px;
                border-radius:50%;
                border:1px solid #180C0B;
                background:#FE8AA5;
                position:absolute;
                top:-2px;
                transform:rotate(98deg);
                left:4px
        }
        .cat .cat-head .cat-ear-l {
                left:0;
                transform:rotate(35deg)
        }
        .cat .cat-head .cat-ear-l:before {
                content:"";
                background:#fff;
                width:33px;
                height:21px;
                border-radius:50%;
                position:absolute;
                transform:rotate(-35deg);
                left:7px;
                top:-3px;
                z-index:1
        }
        .cat .cat-head .cat-ear-r {
                background:#D3D2D4;
                right:3px;
                top:-5px;
                transform:rotate(55deg)
        }
        .cat .cat-head .cat-ear-r:before {
                content:"";
                background:#D3D2D4.........完整代码请登录后点击上方下载按钮下载查看