css实现彩色跳绳跳动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现彩色跳绳跳动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> #btn--yp { box-sizing: content-box; position: fixed; z-index: 9; bottom: 1em; right: 1em; border: solid 1em transparent; width: 4.625em; height: 3.25em; font: 16px/1.25 trebuchet ms, sans-serif; text-indent: 200vw; text-shadow: none; filter: grayscale(1) drop-shadow(0 0 1px #e8e0e0); transition: 0.5s; white-space: nowrap; } #btn--yp:before { box-sizing: inherit; position: absolute; left: 0; bottom: 100%; margin: 1em -0.5em; padding: 0.5em; width: 100%; border-radius: 5px; background: #e8e0e0; color: #000; text-align: center; text-decoration: none; text-indent: 0vw; white-space: normal; animation: float 1s ease-in-out infinite alternate; content: attr(data-txt); } #btn--yp:hover, #btn--yp:focus { outline: none; filter: grayscale(0) drop-shadow(0 0 1px crimson); } @keyframes float { to { transform: translateY(0.75em); } } body { display: grid; place-content: center; overflow: hidden; margin: 0; height: 100vh; background: #222; } .dot { --k: calc(var(--j)/var(--n-rows)); --mi: calc(.5*(var(--n-cols) - 1)); --abs: max(var(--mi) - var(--i), var(--i) - var(--mi)); --y: calc((var(--mi) - var(--abs))*100%); --hsl: calc(270 - var(--k)*360), 100%, 50%; grid-area: 1/calc(var(--i) + 1); padding: 5px; border-radius: 50%; background: radial-gradient(hsl(var(--hsl)), transparent); mix-blend-mode: screen; animation: y 4s cubic-bezier(0.57, 0, 0.43, 1) calc((var(--k) + .375*var(--i)/var(--n-cols) - 2)*4s) infinite alternate; } @keyframes y { 0%, 5% { transform: translatey(calc(-1*var(--y))); } 95%, 100% { transform: translatey(var(--y)); } } </style> </head> <body style="--n-cols: 49; --n-rows: 12"> <style>.dot:nth-of-type(49n + 1) { --i: 0 }.dot:nth-of-type(49n + 2) { --i: 1 }.dot:nth-of-type(49n + 3) { --i: 2 }.dot:nth-of-type(49n + 4) { --i: 3 }.dot:nth-of-type(49n + 5) { --i: 4 }.dot:nth-of-type(49n + 6) { --i: 5 }.dot:nth-of-type(49n + 7) { --i: 6 }.dot:nth-of-type(49n + 8) { --i: 7 }.dot:nth-of-type(49n + 9) { --i: 8 }.dot:nth-of-type(49n + 10) { --i: 9 }.dot:nth-of-type(49n + 11) { --i: 10 }.dot:nth-of-type(49n + 12) { --i: 11 }.dot:nth-of-type(49n + 13) { --i: 12 }.dot:nth-of-type(49n + 14) { --i: 13 }.dot:nth-of-type(49n + 15) { --i: 14 }.dot:nth-of-type(49n + 16) { --i: 15 }.dot:nth-of-type(49n + 17) { --i: 16 }.dot:nth-of-type(49n + 18) { --i: 17 }.dot:nth-of-type(49n + 19) { --i: 18 }.dot:nth-of-type(49n + 20) { --i: 19 }.dot:nth-of-type(49n + 21) { --i: 20 }.dot:nth-of-type(49n + 22) { --i: 21 }.dot:nth-of-type(49n + 23) { --i: 22 }.dot:nth-of-type(49n + 24) { --i: 23 }.dot:nth-of-type(49n + 25) { --i: 24 }.dot:nth-of-type(49n + 26) { --i: 25 }.dot:nth-of-type(49n + 27) { --i: 26 }.dot:nth-of-type(49n + 28) { --i: 27 }.dot:nth-of-type(49n + 29) { --i: 28 }.dot:nth-of-type(49n + 30) { --i: 29 }.dot:nth-of-type(49n + 31) { --i: 30 }.dot:nth-of-type(49n + 32) { --i: 31 }.dot:nth-of-type(49n + 33) { --i: 32 }.dot:nth-of-type(49n + 34) { --i: 33 }.dot:nth-of-type(49n + 35) { --i: 34 }.dot:nth-of-type(49n + 36) { --i: 35 }.dot:nth-of-type(49n + 37) { --i: 36 }.dot:nth-of-type(49n + 38) { --i: 37 }.dot:nth-of-type(49n + 39) { --i: 38 }.dot:nth-of-type(49n + 40) { --i: 39 }.dot:nth-of-type(49n + 41) { --i: 40 }.dot:nth-of-type(49n + 42) { --i: 41 }.dot:nth-of-type(49n + 43) { --i: 42 }.dot:nth-of-type(49n + 44) { --i: 43 }.dot:nth-of-type(49n + 45) { --i: 44 }.dot:nth-of-type(49n + 46) { --i: 45 }.dot:nth-of-type(49n + 47) { --i: 46 }.dot:nth-of-type(49n + 48) { --i: 47 }.dot:nth-of-type(49n + 49) { --i: 48 }.dot:nth-of-type(n + 1) { --j: 0 }.dot:nth-of-type(n + 50) { --j: 1 }.dot:nth-of-type(n + 99) { --j: 2 }.dot:nth-of-type(n + 148) { --j: 3 }.dot:nth-of-type(n + 197) { --j: 4 }.dot:nth-of-type(n + 246) { --j: 5 }.dot:nth-of-type(n + 295) { --j: 6 }.dot:nth-of-type(n + 344) { --j: 7 }.dot:nth-of-type(n + 393) { --j: 8 }.dot:nth-of-type(n + 442) { --j: 9 }.dot:nth-of-type(n + 491) { --j: 10 }.dot:nth-of-type(n + 540) { --j: 11 } </style> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0