css实现多彩音符在线条上跳跃动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现多彩音符在线条上跳跃动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { box-sizing: border-box; } body { display: grid; place-items: center; min-height: 100vh; background-image: url("//repo.bfw.wiki/bfwrepo/image/5e4350528640e.png"); } .auditorium { display: grid; grid-gap: 3.75rem; grid-template-columns: repeat(var(--seed), 5vmin); grid-template-rows: repeat(var(--seed), 5vmin); } .strings { position: absolute; top: 10em; display: grid; grid-gap: 3rem; grid-template-rows: repeat(var(--seed), 5vmin); width: 100%; } .strings:before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 35em; width: 35em; border-radius: 50%; background-color: rgba(0, 0, 0, 0.8); box-shadow: inset 0px 0px 20px 10px rgba(165, 42, 42, 0.6); border: 10px solid #000; z-index: 0; } .strings span.string { width: 100%; display: block; height: 3px; background-color: #fff; z-index: 5; } .balloon, string { height: 4em; text-align: center; aspect-ratio: 1; background: hsl(var(--hue, 0), 90%, 50%); animation-name: float-away; animation-duration: 3s; animation-iteration-count: infinite; animation-fill-mode: forwards; animation-timing-function: ease-out; transform: translateY(0); animation-delay: calc(var(--index, 0) * 0.1s); position: relative; border: #000 1px solid; box-shadow: inset 3px 3px 3px #fff, 4px 2px 10px 3px rgba(0, 0, 0, 0.3); border-top-left-radius: 50%; border-top-right-radius: 50% 100%; border-bottom-right-radius: 5px; border-bottom-left-radius: 100% 50%; transform: rotate(45deg) rotateY(0deg); transform-origin: bottom 40%; padding: 5px; color: #fff; z-index: 10; } .balloon span, string span { position: absolute; font-size: 2em; inset: 0.1em; transform: rotate(-30deg); } @keyframes float-away { 50% { transform: translateY(calc(var(--travel, 0) * -.4vmin)) rotate(45deg) rotateY(-65deg); } } </style> </head> <body> <div class="auditorium" style="--seed: 5;"> <div class="balloon" style="--index: 0; --hue: 296; --travel: 4;"><span>♬</span></div> <div class="balloon" style="--index: 1; --hue: 318; --travel: 100;"><span>♬</span></div> <div class="balloon" style="--index: 2; --hue: 327; --travel: 29;"><span>♬</span></div> <div class="balloon" style="--index: 3; --hue: 109; --travel: 11;"><span>♬</span></div> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0