div+css实现卡通小伙和猫在沙发下晚上玩电脑敲键盘动画代码
代码语言:html
所属分类:动画
代码描述:div+css实现卡通小伙和猫在沙发下晚上玩电脑敲键盘动画代码
代码标签: 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; width:26px; height:21px; border-radius:50%; position:absolute; transform:rotate(-55deg); left:4px; top:3px; z-index:1 } .cat .cat-head .cat-eye-l,.cat .cat-head .cat-eye-r { width:7px; height:5px; border-radius:50%; border:1px solid #180C0B; background:#D3D2D4; position:absolute; top:12px; border-top:0; border-right:0; border-left:0 } .cat .cat-head .cat-eye-l { left:11px } .cat .cat-head .cat-eye-r { right:11px } .cat .cat-arm-shoulder { position:absolute; width:26px; height:15px; border-radius:50%; border:1px solid #180C0B; background:#fff; bottom:20px; right:-22px; transform:rotate(-122deg) } .cat .cat-arm-l,.cat .cat-arm-r { position:absolute; width:35px; height:13px; border-radius:50%; border:1px solid #180C0B; background:#fff; bottom:10px } .cat .cat-arm-l { transform:rotate(-10deg); right:-18px } .cat .cat-arm-l:after { content:""; background:#fff; width:8px; height:11px; position:absolute; border-radius:50%; right:-1px; top:-3px } .cat .cat-arm-r { transform:rotate(10deg); right:15px } .cat .cat-tale { position:absolute; width:25px; height:13px; border-radius:50%; border:1px solid #180C0B; background:#fff; bottom:10px; left:10px; transform:rotate(-45deg) } .boy { position:absolute; width:65px; height:100px; border-radius:150px 25px 25px 80px; border:1px solid #180C0B; background:#D8D8D8; bottom:-80px; left:80px; z-index:1; box-shadow:inset -28px -10px #40505E,inset 8px 1px #C6C6C6 } .boy .arm-l,.boy .arm-r { position:absolute; width:75px; height:25px; border-radius:12px; border:1px solid #180C0B; background:#D8D8D8; bottom:40px; left:30px; transform:rotate(30deg); box-shadow:inset -9px -7px #C6C6C6 } .boy .arm-l { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0