css+div实现炫酷火苗花朵动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现炫酷火苗花朵动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #000; min-height: 100vh; display: grid; place-items: center; } .container { position: relative; } .container i { position: absolute; left: -30px; top: -30px; width: 200px; height: 200px; border-radius: 100px 100px 0 100px; transform-origin: 30px 30px; mix-blend-mode: plus-lighter; box-shadow: 25px 25px 5px var(--color) inset, 5px 5px 50px var(--color); -webkit-animation: i var(--duration) var(--delay) infinite linear; animation: i var(--duration) var(--delay) infinite linear; } @-webkit-keyframes i { to { rotate: 1turn; } } @keyframes i { to { rotate: 1turn; } } .container i:nth-child(odd) { animation-direction: reverse; } .container i:nth-child(1) { --color: hsl(0 100% 50% / 0.25); --delay: -7.81s; --duration: 6.16s; } .container i:nth-child(2) { --color: hsl(1 100% 50% / 0.25); --delay: -6.85s; --duration: 7.425s; } .container i:nth-child(3) { --color: hsl(2 100% 50% / 0.25); --delay: -5.38s; --duration: 8.431s; } .container i:nth-child(4) { --color: hsl(3 100% 50% / 0.25); --delay: -3.66s; --duration: 9.101s; } .container i:nth-child(5) { --color: hsl(4 100% 50% / 0.25); --delay: -1.31s; --duration: 10.43s; } .container i:nth-child(6) { --color: hsl(5 100% 50% / 0.25); --delay: -4.73s; --duration: 11.501s; } .container i:nth-child(7) { --color: hsl(6 100% 50% / 0.25); --delay: -3.18s; --duration: 12.098s; } .container i:nth-child(8) { --color: hsl(7 100% 50% / 0.25); --delay: -1.36s; --duration: 13.503s; } .container i:nth-child(9) { --color: hsl(8 100% 50% / 0.25); --delay: -1.2s; --duration: 14.374s; } .container i:nth-child(10) { --color: hsl(9 100% 50% / 0.25); --delay: -2.12s; --duration: 15.399s; } .container i:nth-child(11) { --color: hsl(10 100% 50% / 0.25); --delay: -2.78s; --duration: 16.628s; } .container i:nth-child(12) { --color: hsl(11 100% 50% / 0.25); --delay: -6.72s; --duration: 17.937s; } .container i:nth-child(13) { --color: hsl(12 100% 50% / 0.25); --delay: -4.92s; --duration: 19.009s; } .container i:nth-child(14) { --color: hsl(13 100% 50% / 0.25); --delay: -6.83s; --duration: 20.169s; } .container i:nth-child(15) { --color: hsl(14 100% 50% / 0.25); --delay: -0.6s; --duration: 20.922s; } .container i:nth-child(16) { --color: hsl(15 100% 50% / 0.25); --delay: -4.07s; --duration: 21.775s; } .container i:nth-child(17) { --color: hsl(16 100% 50% / 0.25); --delay: -7.45s; --duration: 23.102s; } .container i:nth-child(18) { --color: hsl(17 100% 50% / 0.25); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0