<div class="scene1">
<div id="sun" class="sun"></div>
<div id="sun2" class="sun"></div>
<div class="sun_afterimages">
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
<div class="sun_afterimage"></div>
</div>
</div>
<div class="scene2">
<svg class ="svg_circle" version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="300px" height="300px" viewBox="0 0 100 100" enable-background="new 0 0 56.69 56.69"
xml:space="preserve">
<circle id="rotate_circle1" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="25"/>
<circle id="rotate_circle2" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="35"/>
<circle id="rotate_circle3" fill="transparent" stroke="#000000" stroke-miterlimit="10" cx="50" cy="50" r="45"/>
</svg>
<div id="stick"></div>
</div>
<div class="scene3">
<div class="circles" id="circles1">
<div class="circle" style="border-color:#c9af52;"></div>
<div class="circle" style="border-color:#183c43;"></div>
<div class="circle" style="border-color:#FF0088;"></div>
<div class="circle" style="border-color:#7986CB;"></div>
<div class="circle" style="border-color:#E2E6E9;"></div>
</div>
</div>
<div class="scene4">
<div id="slice_circle" class="circle"></div>
</div>
<div class="scene5">
<div id="circle_squares">
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
<div class="circle_square"></div>
</div>
</div>
<div class="scene6">
<div id="bomb">
<svg class="tail" version="1.1" id="레이어_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="63.333px" height="30.667px" viewBox="0 0 63.333 30.667"
style="enable-background:new 0 0 63.333 30.667;" xml:space="preserve">
<path d="M3,19.333C3,17.258,9.159,1.416,21,5.667
c13,4.667,13.167,38.724,39.667,7.39"/>
</svg>
<div class="head"></div>
<div class="body"></div>
</div>
</div>
<div id="text">1</div>
html, body {
position: relative;
height: 100%;
margin: 0;
padding: 0;
}
body {
background:skyblue;
overflow: hidden;
}
.scene6 {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.sun {
width: 200px;
height: 200px;
top:50%;
left: 50%;
margin-left: -100px;
margin-top:-100px;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
}
#sun {
/* background: #FFE26C; */
border-color: #FFE26C;
border-style: solid;
border-width: 75px;
}
#sun2 {
border: 75px solid #fff;
}
.sun_afterimage {
width: 60px;
height:2px;
background: #FFE26C;
top:50%;
left: 50%;
position: absolute;
transform-origin: 0% 1px;
transform:translate(120px, 0px);
}
#moonbackground {
background: #96ABC0;
top:50%;
left: 50%;
width: 1000px;
height: 1000px;
margin: -500px 0 0 -500px;
position: absolute;
border-radius: 50%;
}
#text {
top:50%;
left: 50%;
width: 100px;
height: 100px;
font-size: 100px;
margin-left:-50px;
margin-top:-50px;
position: absolute;
color: white;
text-align: center;
line-height: 100px;
font-family: sans-serif;
}
.circles {
z-index: 100;
}
.circle {
width: 150px;
height: 150px;
top:50%;
left: 50%;
margin-top:-75px;
margin-left:-75px;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
border: 75px solid transparent;
}
.svg_circle {
top:50%;
left: 50%;
width: 300px;
height: 300px;
font-size: 100px;
margin-left:-150px;
margin-top:-150px;
position: absolute;
}
.svg_circle circle{
stroke-width: 5;
stroke-linejoin: round;
stroke-dasharray: 0 1000;
stroke-dashoffset: 1;
stroke: #ff8c3a;
}
.svg_circle circle#rotate_circle2 {
stroke-width: 2;
stroke: #3AA1BF;
}
.svg_circle circle#rotate_circle3 {
stroke-width: 1;
stroke: white;
}
#stick {
position: absolute;
top:50%;
left: 50%;
height: 0;
margin-left: -17px;
width: 24px;
border-bottom: 150px solid #E5EBF7;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
transform-origin: 50% 0%;
}
#slice_circle {
background: #ea6b96;
}
.circle_square {
width: 20px;
height: 20px;
top:50%;
left: 50%;
margin-top:-10px;
margin-left:-10px;
position: absolute;
border-radius: 50%;
box-sizing: border-box;
background: #FFDDDD;
}
#bomb {
position: absolute;
width: 200px;
height: 200px;
top:50%;
left: 50%;
margin-left:-100px;
margin-top:-100px;
stroke-dasharray: 100 1000;
stroke-dashoffset: 0;
transform: rotate(20deg);
}
#bomb .tail {
position: absolute;
left: 50%;
top:-110px;
width: 200px;
height: 200px;
margin-left: -10px;
}
#bomb .tail path {
stroke-width: 3px;
fill:none;stroke:#000000;stroke-miterlimit:10;
}
#bomb .head {
position: absolute;
width: 80px;
height: 20px;
left: 50%;
margin-left: -40px;
top:-10px;
background: #000;
}
#bomb .body{
position: absolute;
top:0;
width: 200px;
height: 200px;
background: #000;
border-radius: 50%;
}
const ease = [0.42, 0, 0.58, 1];
const customTimingFunction = [0.48, 0.01, 0.25, 1];
const scene1 = new Scene({
"#sun" : {
0 : {"border-width" : "100px", "transform" : "scale(0, 0)"},
1 : {"border-width" : "0px", "transform" : "scale(1, 1)"}
},
"#sun2" : {
0 : {"transform" : "scale(0, 0)", "border-width" : "100px"},
0.9 : {"transform": "scale(0.9, 0.9)", "border-width": "0px"}
}
}, {
easing : customTimingFunction,
selector: true,
playSpeed: 1,
});
for (let i = 1; i <= 8; ++i) {
scene1.newItem(`.sun_afterimage:nth-child(${i})`, {
easing : customTimingFunction,
selector: true
}).set({
0 : {transform : {rotate: i * 45 + "deg", translate : "40px, 0px", scale : "0,1"}, width: "120px"},
1.8 : {transform : {translate : "140px, 0px", scale : "1,1"}, width: "0px"},
});
}
// stroke-dasharray: 283 1000;
// stroke-dashoffset: -283;
const scene2 = new Scene();
const scene2_radius = [25 * 2 * Math.PI, 35 * 2 * Math.PI, 45 * 2 * Math.PI];
const scene2_delay = 0.4;
for (let i = 0; i < scene2_radius.length; ++i) {
const radius = scene2_radius[i];
scene2.newItem("#rotate_circle" + (i + 1), {selector: true, easing: ease, delay: scene2_delay}).set({
0: "stroke-dasharray: 0 1000; stroke-dashoffset: 1;",
1: `stroke-dasharray: ${radius} 1000; stroke-dashoffset: 1;"`,
2: `stroke-dashoffset: ${-radius}`,
});
}
scene2.newItem("#stick", {easing: ease, selector: true}).set({
0 : "transform: rotate(-90deg) scale(1, 0)",
[scene2_delay / 2] : "transform: rotate(-90deg) scale(1,1)", // t = delay / 2
[scene2_delay] : "transform: rotate(-90deg) scale(1,1)", // t = delay
[1 + scene2_delay] : "transform: rotate(270deg) scale(1,1)", // t = 1 + delay
[2 + scene2_delay] : "transform: rotate(630deg), scale(1,1)", // t = 2 + delay
[2 + scene2_delay + scene2_delay / 2] : "transform: scale(1,0)", // t = 2 + delay + delay / 2
});
const scene3 = new Scene();
const circles = document.querySelectorAll("#circles1 .circle");
const circlesPosition = [
{x:0, y:0, r: 100, delay: 0, duration: 1.2},
{x:-30, y:-50, r: 40, delay: 0.3, duration: 0.9},
{x:40, y:50, r: 50, delay: 0.5, duration: 0.9},
{x:-40, y:60, r: 60, delay: 0.6, duration: 0.9},
{x:70, y:-40, r: 50, delay: 0.8, duration: 1}
];
for (let i = 0; i < circles.length; ++i) {
const cp = circlesPosition[i];
const r = cp.r + "px";
const w = (cp.r * 2) + "px";
const {delay, duration, x, y} = cp;
scene3.newItem("#circles1 .circle:nth-child(" + (i+1) + ")", {
easing : customTimingFunction,
selector: true,
}).set({
0: {"margin-left": "-"+r, "border-width" : r, "margin-top" : "-"+r, width: w, height: w, transform : {translate : x +"px,"+y+"px", scale : "0,0" }},
[delay + 0.001]: {transform: "scale(0,0)", "border-width": r},
[duration + delay]: {transform:"scale(1,1)", "border-width" : "0px"},
}).setCSS(0, ["border-color"]);
}
const scene4 = new Scene();
const scene4_slice_circle = scene4.newItem("#slice_circle", {selector: true, easing: customTimingFunction});
const scene4_duration = 0.3;
scene4_slice_circle.set({
0 : {transform : "scale(0,0)"},
0.3 : {transform : "scale(1,1)"},
});
for(let i = 0; i <= 5; ++i) {
const clipArea = i * 30 ;
const sign = i % 2 == 0 ? 1 : -1;
scene4_slice_circle.set(0.3 + i * scene4_duration, {
clip: "rect("+clipArea+"px, 150px, 150px, 0px)",
transform : "rotate(" + sign*10+"deg)"
});
}
const scene5 = new Scene();
const css = document.querySelectorAll("#circle_squares .circle_square");
const deg = 360 / css.length;
for (let i = 0; i < css.length; ++i) {
scene5.newItem(".circle_square:nth-child(" + (i + 1) +")", {selector: true}).load({
0 : {transform: {rotate:(i * deg +"deg"), translate:"100px, 0px", scale: "0,0"}},
[0 + i * 0.1 + 0.01] : {transform: {scale:"0, 0"}},
[0.2 + i * 0.1] : {transform: {scale:"1.3, 1.3"}},
[0.3 + i * 0.1] : {transform: {scale:"1, 1"}},
[0.6 + i * 0.1] : {"border-radius": "50%", opacity: 1},
[1 + i * 0.1] : {"border-radius": "0%", opacity: 0}
});
}
const scene6 = new Scene({
"#bomb" : {
0 : {transform : "rotate(20deg) scale(0,0)"},
0.3 : {transform: "scale(1.3, 1.3)"},
0.5 : {transform: "scale(1,1)"},
},
"#bomb .tail path" : {
0: {"stroke-dashoffset" : 0},
2: {"stroke-dashoffset" : 100},
},
"#bomb .body": {
2 : {transform : "scale(1,1)"},
3 : {transform : "scale(20,20)"},
}
}, {
easing: ease,
selector: true,
});
scene1.on("animate", function (e) {
var time = e.time;
if (scene6.getDelay() < time) {
text.innerHTML = "6";
} else if (scene5.getDelay() < time) {
text.innerHTML = "5";
} else if (scene4.getDelay() < time) {
text.innerHTML = "4";
} else if (scene3.getDelay() < time) {
text.innerHTML = "3";
} else if (scene2.getDelay() < time) {
text.innerHTML = "2";
} else {
text.innerHTML = "1";
}
});
// scene1.setIterationCount("infinite");
scene1.append(scene2);
scene1.append(scene3);
scene1.append(scene4);
scene1.append(scene5);
scene1.append(scene6);
scene1.setTime(0).play();
View Compiled
This Pen doesn't use any external CSS resources.