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

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

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