css实现音箱播放音乐振动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现音箱播放音乐振动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @-webkit-keyframes vibrate { 0% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } 20% { -webkit-transform: translate(0, -5px) scale(1.06); transform: translate(0, -5px) scale(1.06); } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } } @keyframes vibrate { 0% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } 20% { -webkit-transform: translate(0, -5px) scale(1.06); transform: translate(0, -5px) scale(1.06); } 100% { -webkit-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1); } } @-webkit-keyframes vibrate2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1.03); transform: scale(1.03); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes vibrate2 { 0% { -webkit-transform: scale(1); transform: scale(1); } 20% { -webkit-transform: scale(1.03); transform: scale(1.03); } 100% { -webkit-transform: scale(1); transform: scale(1); } } .absolute, .container, .tweeter, .woofer, .woofer__center { position: absolute; left: 50%; top: 50%; } .base, .tweeter, .woofer { border-radius: 100%; background: linear-gradient(70deg, #828387, #f0f0f2, #828387); box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); } .container { background: linear-gradient(90deg, #A09F9F, #d0d0d2, #A09F9F); width: 300px; height: 450px; margin: -225px 0 0 -150px; border: 4px solid #828387; border-radius: 10px; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8); } .tweeter { margin: -200px 0 0 -75px; width: 150px; height: 150px; } .tweeter__rim { position: absolute; left: 25px; top: 25px; width: 100px; height: 100px; border-radius: 100%; } .tweeter__rim .screw { width: 14px; height: 14px; position: absolute; border-radius: 50%; position: absolute; box-shadow: inset 0px -2px 4px #000, inset 0px 2px 2px rgba(255, 255, 255, 0.7); border: 2px solid #777; } .tweeter__rim .screw:nth-child(1) { top: -22px; left: 40px; } .tweeter__rim .screw:nth-child(2) { bottom: -22px; left: 45px; } .tweeter__rim .screw:nth-child(3) { top: 42px; left: -22px; } .tweeter__rim .screw:nth-child(4) { top: 42px; right: -22px; } .tweeter__rim .mesh { -webkit-transform: scale(1, 1); transform: scale(1, 1); -webkit-animation: vibrate 0.4s linear infinite; animation: vibrate 0.4s linear infinite; } .tweeter__rim .mesh:after { content: ''; width: 90px; height: 90px; border-radius: 100%; border: 5px solid #444; position: absolute; background: linear-gradient(transparent 70%, #000 30%), linear-gradient(90deg, transparent 70%, #000 30%), linear-gradient(70deg, #000, #dbdbdd, #000); background-size: 4px 4px, 4px 4px, 90px 90px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .woofer { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0