svg+css模拟电影拍摄咔开始的带声效的动画按钮代码
代码语言:html
所属分类:布局界面
代码描述:svg+css模拟电影拍摄咔开始的带声效的动画按钮代码
代码标签: svg css 模拟 电影 拍摄 咔 开始 带 声效 动画 按钮 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } .container { position: absolute; left: calc(50% - 24px); top: calc(50% - 24px); transform: scale(1.5); } .clappingboard { position: relative; width: 48px; height: 48px; border-radius: 24px; padding: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease; } .clappingboard .clap { transition: all 0.2s ease; } .clappingboard .light { position: absolute; top: 26px; left: 17px; width: 3px; height: 3px; border-radius: 50%; background: #8C8C8C; } .clappingboard:hover { background: rgba(0, 0, 0, 0.04); } .clappingboard:hover .clap { transform: rotate(-10deg) translate3d(-1.5px, 1px, 0); } .clappingboard.active { animation: clipclap 0.2s forwards; animation-delay: 0.06s; } .clappingboard.active .clap { transform: rotate(0) translate3d(0, 0, 0); } .clappingboard.active .light { background: #FF2828; box-shadow: 0 0 3px 0.5px #FF2828; } @keyframes clipclap { 0% { transform: translate3d(0, 0, 0) rotate(0); } 40% { transform: translate3d(0, 1px, 0) rotate(4deg); } 1000% { transform: translate3d(0, 0, 0) rotate(0); } } </style> </head> <body translate="no"> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0