div+css实现逼真喇叭振动动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现逼真喇叭振动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { margin: 0; } body { height: 100vh; background-color: antiquewhite; } .speaker-wrapper { position: absolute; width: 80vmin; aspect-ratio: 1/1; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: circle(50%); box-shadow: 0 0 10px #000000; } .speaker { position: absolute; aspect-ratio: 1/1; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: contain; } .speaker.inside { width: 38%; background-image: url(//repo.bfw.wiki/bfwrepo/images/speaker/speaker-3.webp); filter: blur(0.05vmin); animation-name: inside; animation-duration: 100ms; animation-iteration-count: infinite; animation-timing-function: ease; } .speaker.center { width: 76%; background-image: url(//repo.bfw.wiki/bfwrepo/images/speaker/speaker-2.webp); filter: blur(0.2vmin); animation-name: center; animation-duration: 50ms; animation-iteration-co.........完整代码请登录后点击上方下载按钮下载查看
网友评论0