JSFiddle - React, Tailwind, and code Playground
by 규연 황
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TimelineMax.min.js"></script>
<svg viewBox="0 0 1216 361.955">
<defs>
<mask id="mask">
<circle fill="#ffffff" cx="762" cy="-7" r="126" />
</mask>
</defs>
<g id="fireworks01" class="fireworks-group">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M680.001,469
c151-266.418,411.665-312.334,411.665-312.334"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6.9792" cx="1091.666" cy="156.666" r="16.666"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6.9256" cx="1091.666" cy="156.666" r="28.666"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,7.0347" cx="1091.666" cy="156.666" r="45.916"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,6.9663" cx="1091.666" cy="156.666" r="57.666"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,12.0431" cx="1091.666" cy="156.666" r="70.916"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,17.2624" cx="1091.666" cy="156.666" r="85.166"/>
</g>
<g id="fireworks02" class="fireworks-group">
<path fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" d="M481.667,426c0,0-68.777-218.341-233.722-298.837"
/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10" stroke-dasharray="0,7.0239" cx="247.945" cy="127.162" r="14.536"/>
<circle fill="none" stroke="#FFFFFF" stroke-width="4" stroke-linecap="round" stroke-miterlimit="10"...CSS
html, body {
height: 100%;
}
body {
background: linear-gradient(to bottom, #5b2072 0%,#322c68 100%);
background-repeat: repeat-x;
background-size:cover;
background: #322c68;
}
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#fireworks01 circle {
}
svg #fireworks01 path,
svg #fireworks02 path,
svg #fireworks03 path {
animation-name: fireworks-step01-move;
animation-delay: 0.5s;
animation-duration: .5s;
stroke-dasharray: 800;
stroke-dashoffset: 800;
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
animation-iteration-count: 1;
animation-direction: alternate;
animation-fill-mode: backwards;
}
@keyframes fireworks-step01-move {
100% {
stroke-dashoffset: 0;
opacity: 0;
}
}
/* #fireworks01 circle,
#fireworks02 circle,
#fireworks03 circle {
transform: scale(0);
opacity: 0;
} */
/* @keyframes fireworks-step02-move {
0 {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(1.5);
}
} */
svg circle:nth-of-type(2) {
animation-delay: .7s;
}
svg circle:nth-of-type(3) {
animation-delay: .9s;
}
svg circle:nth-of-type(4) {
animation-delay: 1.1s;
}
svg circle:nth-of-type(5) {
animation-delay: 1.2s;
}
svg circle:nth-of-type(6) {
animation-delay: 1.3s;
}
svg #fireworks02 path {
animation-delay: 0.7s;
}
svg #fireworks02 circle:nth-of-type(2) {
animation-delay: .8s;
}
svg #fireworks02 circle:nth-of-type(3) {
animation-delay: .9s;
}
svg #fireworks02 circle:nth-of-type(4) {
animation-delay: 1.2s;
}
svg #fireworks02 circle:nth-of-type(5) {
animation-delay: 1.3s;
}
svg #fireworks02 circle:nth-of-type(6) {
animation-delay: 1.4s;
}
#moon circle {
animation-name: moon-move;
animation-delay: 0;
animation-duration: 7s;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-direction: alternate;
animation-fill-mode:...JavaScript
TweenMax.set(".fireworks-group circle", {
scale: 0,
transformOrigin: "50% 50%"
});
var fireworksCircle = $(".fireworks-group circle"),
fireworksCircle01 = $(".fireworks-group circle:nth-of-type(1)"),
fireworksCircle02 = $(".fireworks-group circle:nth-of-type(2)"),
fireworksCircle03 = $(".fireworks-group circle:nth-of-type(3)"),
fireworksCircle04 = $(".fireworks-group circle:nth-of-type(4)"),
fireworksCircle05 = $(".fireworks-group circle:nth-of-type(5)"),
fireworksCircle06 = $(".fireworks-group circle:nth-of-type(6)"),
t1 = new TimelineMax({repeat:-1, repeatDelay:1})
t1.to( fireworksCircle01, 2, {
scale: 1.5,
transformOrigin: "50% 50%"
}, 0.4)
t1.to( fireworksCircle01, 1, {
scale: 2,
opacity: 0,
}, 2)
t1.to( fireworksCircle02, 1, {
scale: 1.5,
transformOrigin: "50% 50%"
}, 0.7)
t1.to( fireworksCircle02, 1, {
scale: 2,
opacity: 0
}, 1.5 )
t1.to( fireworksCircle03, 1, {
scale: 1.5,
transformOrigin: "50% 50%"
}, 0.9 )
t1.to( fireworksCircle03, 1, {
scale: 2,
opacity: 0
}, 1.5 )
t1.to( fireworksCircle04, 1, {
scale: 1.5,
transformOrigin: "50% 50%"
}, 1.1 )
t1.to( fireworksCircle04, 1, {
scale: 2,
opacity: 0
}, 1.5 )
t1.to( fireworksCircle05, 1, {
scale: 1.5,
transformOrigin: "50% 50%"
}, 1.3 )
t1.to( fireworksCircle05, 1, {
scale: 2,
opacity: 0
}, 1.5 )
t1.to( fireworksCircle, 2, {
scale: 1,
transformOrigin: "50% 50%"
}, 1.5 )
t1.to( fireworksCircle, 1, {
scale: 2.5,
opacity: 0
}, 1.5 )