css实现手指依次敲桌子动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现手指依次敲桌子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style> body{ background: black; padding: 100px; } .🤚 { --skin-color: #E4C560; --tap-speed: 0.6s; --tap-stagger: 0.1s; position: relative; width: 80px; height: 60px; margin-left: 80px; } .🤚:before { content: ''; display: block; width: 180%; height: 75%; position: absolute; top: 70%; right: 20%; background-color: black; border-radius: 40px 10px; filter: blur(10px); opacity: 0.3; } .🌴 { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: var(--skin-color); border-radius: 10px 40px; } .👍 { position: absolute; width: 120%; height: 38px; background-color: var(--skin-color); bottom: -18%; right: 1%; transform-origin: calc(100% - 20px) 20px; transform: rotate(-20deg); border-radius: 30px 20px 20px 10px; border-bottom: 2px solid rgba(0, 0, 0, 0.1); border-left: 2px solid rgba(0, 0, 0, 0.1); } .👍:after { width: 20%; height: 60%; content: ''; background-color: rgba(255, 255, 255, 0.3); position: absolute; bottom: -8%; left: 5px; border-radius: 60% 10% 10% 30%; border-right: 2px solid rgba(0, 0, 0, 0.05); } .👉 { position: absolute; width: 80%; height: 35px; background-color: var(--skin-color); bottom: 32%; right: 64%; transform-origin: 100% 20px; animation-duration: calc(var(--tap-speed) * 2); animation-timing-function: ease-in-out; animation-iteration-count: infinite; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0