疫情期间在家码代码动画
代码语言:html
所属分类:动画
代码描述:疫情期间在家码代码动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: 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%; -webkit-transform: translate(-50%); 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; -webkit-filter: brightness(0.8); filter: brightness(0.8); } .sofa:after { content: ""; width: 130px; height: 70px; background: #EFBB02; border-radius: 25px; position: absolute; bottom: -40px; right: 0; -webkit-transform: translatex(40%); 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%; -webkit-transform: translatex(-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; -webkit-transform: skew(-30deg); 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; -webkit-transform: skew(50deg); transform: skew(50deg); box-shadow: inset -5px 10px #B2906A; } .sofa .sofa-bottom-r { right: -20px; -webkit-transform: skew(30deg); transform: skew(30deg); } .sofa .sofa-bottom-r:after { right: 70px; -webkit-transform: skew(-50deg); 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; -webkit-transform: rotate(-14deg); 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; -webkit-transform: rotate(98deg); transform: rotate(98deg); left: 4px; } .cat .cat-head .cat-ear-l { left: 0; -webkit-transform: rotate(35deg); transform: rotate(35deg); } .cat .cat-head .cat-ear-l:before { content: ""; background: #fff; width: 33px; height: 21px; border-radius: 50%; position: absolute; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); left: 7px; top: -3px; z-index: 1; } .cat .cat-head .cat-ear-r { background: #D3D2D4; right: 3px; top: -5px; -webkit-transform: rotate(55deg); transform: rotate(55deg); } .cat .cat-head .cat-ear-r:before { content: ""; background: #D3D2D4; width: 26px; height: 21px; border-radius: 50%; position: absolute; -webkit-transform: rotate(-55deg); 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; -webkit-transform: rotate(-122deg); 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 { -webkit-transform: rotate(-10deg); 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 { -webkit-transform: rotate(10deg); 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; -webkit-transform: rotate(-45deg); 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; -webkit-transform: rotate(30deg); transform: rotate(30deg); box-shadow: inset -9px -7px #C6C6C6; } .boy .arm-l { -webkit-an.........完整代码请登录后点击上方下载按钮下载查看
网友评论0