div+css实现多彩形状烟花绽放动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现多彩形状烟花绽放动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
@property --tx {
syntax: "<length-percentage>";
initial-value: 0%;
inherits: true;
}
@property --sf {
syntax: "<number>";
initial-value: 0;
inherits: true;
}
html {
overflow: hidden;
}
body {
background: #17223b;
}
body {
--property-test: block ;
}
div {
position: absolute;
}
.bang {
--sf: 1;
top: var(--y);
left: var(--x);
scale: var(--sf);
}
.ring {
--tx: 9.5em;
filter: drop-shadow(0 0 9px currentcolor);
-webkit-animation: var(--rz, ) tx 1.25s var(--te, cubic-bezier(0.32, 1, 0.68, 1)) infinite, sf 1.25s cubic-bezier(0.65, 1, 0.35, 1) infinite;
animation: var(--rz, ) tx 1.25s var(--te, cubic-bezier(0.32, 1, 0.68, 1)) infinite, sf 1.25s cubic-bezier(0.65, 1, 0.35, 1) infinite;
-webkit-animation-delay: calc(var(--df)*1.25s + var(--dt, 0s));
animation-delay: calc(var(--df)*1.25s + var(--dt, 0s));
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.dots {
--tx: 6.5em;
--rz: rz 1.25s linear infinite, ;
--dt: calc((var(--idx) + 2.5)*0.1875s) ;
}
.rays {
--tx: 13em;
--te: cubic-bezier(.25, 0, .75, 0) ;
}
.star {
--dt: calc((var(--idx) - 1)*-0.25s) ;
}
.item {
height: 0.5em;
aspect-ratio: 1;
border-radius: 50%;
transform: translate(-50%, -50%) rotate(calc(var(--k)/var(--n)*1turn)) translate(var(--tx)) scale(var(--sf));
background: currentcolor;
}
.rays .item {
aspect-ratio: 10;
}
.star .item {
height: 2em;
-webkit-clip-path: polygon(97.5528258148% 50%, 74.0444026342% 67.4692810742%, 64.6946313073% 95.2254248594%, 40.8158554329% 78.2658905371%, 11.5289557853% 77.9508497187%, 20.2794838658% 50%, 11.5289557853% 22.0491502813%, 40.8158554329% 21.7341094629%, 64.6946313073% 4.7745751406%, 74.0444026342% 32.5307189258%);
clip-path: polygon(97.5528258148% 50%, 74.0444026342% 67.4692810742%, 64.6946313073% 95.2254248594%, 40.8158554329% 78.2658905371%, 11.5289557853% 77.9508497187%, 20.2794838658% 50%, 11.5289557853% 22.0491502813%, 40.8158554329% 21.7341094629%, 64.6946313073% 4.7745751406%, 74.0444026342% 32.5307189258%);
}
@-webkit-keyframes tx {
0%, 50% {
--tx: 0% ;
}
}
@keyframes tx {
0%, 50% {
--tx: 0% ;
}
}
@-webkit-keyframes rz {
0% {
rotate: 0deg;
}
100% {
rotate: calc((2*var(--idx) - 1)*.25turn);
}
}
@keyframes rz {
0% {
rotate: 0deg;
}
100% {
rotate: calc((2*var(--idx) - 1)*.25turn);
}
}
@-webkit-keyframes sf {
0%, 50%, 100% {
--sf: 0 ;
}
75% {
--sf: 1 ;
}
}
@keyframes sf {
0%, 50%, 100% {
--sf: 0 ;
}
75% {
--sf: 1 ;
}
}
/* support info box styling */
/* for reference:
* https://twitter.com/anatudor/status/1601168779651997698 */
@property --property-test {
syntax: "<custom-ident>";
initial-value: none;
inherits: false;
}
.box {
position: fixed;
inset: auto 1vw 1vh;
margin: 0;
border-left: 5px solid #dc3055;
padding: 0.625em;
box-shadow: 2px 2px 5px gray;
background: #851d40;
color: #fff;
font: clamp(.625em, 4vw, 1.25em)/1.25 trebuchet ms, ubuntu, verdana, arial, sans-serif;
}
.box--info {
inset: 1vh 1vw auto;
border-color: #4e8d7c;
background: #045762;
}
.box--property {
display: var(--property-test);
}
code {
padding: 2px;
background: rgba(0, 0, 0, 0.2);
font: 1.1em/1.2 ubuntu mono, consolas, monaco, monospace;
}
a {
color: gold;
}
</style>
</head>
<body style="--n: 16">
<style>.item:nth-child(1) { --k: 0 }.item:nth-child(2) { --k: 1 }.item:nth-child(3) { --k: 2 }.item:nth-child(4) { --k: 3 }.item:nth-child(5) { --k: 4 }.item:nth-child(6) { --k: 5 }.item:nth-child(7) { --k: 6 }.item:nth-child(8) { --k: 7 }.item:nth-child(9) { --k: 8 }.item:nth-child(10) { --k: 9 }.item:nth-child(11) { --k: 10 }.item:nth-child(12) { --k: 11 }.item:nth-child(13) { --k: 12 }.item:nth-child(14) { --k: 13 }.item:nth-child(15) { --k: 14 }.item:nth-child(16) { --k: 15 }
</style>
<div class="bang" style="color: #86ed88; --x: 30%; --y: 25%; --df: -0.57">
<div class="ring dots" style="--idx: 0">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring dots" style="--idx: 1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring rays" style="color: #4069ff">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 0; color: #4069ff">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="bang" style="color: #28e5f2; --x: 50%; --y: 50%; --df: -0.43; --sf: 0.875">
<div class="ring dots" style="--idx: 0; color: #c1d752">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring rays">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 0">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="bang" style="color: #cc774b; --x: 75%; --y: 72.5%; --df: -0.03; --sf: 0.75">
<div class="ring dots" style="--idx: 0; color: #d77999">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring dots" style="--idx: 1; color: #88ee99">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring rays">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 0">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring star" style="--idx: 1">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<div class="bang" style="color: #e5b94a; --x: 65%; --y: 22.5%; --df: -0.53; --sf: 0.5">
<div class="ring dots" style="--idx: 0; color: #fb6577">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="ring dots" style="--idx: 1; color: #28e5f2">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class=".........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0