(새 문서: @keyframes snow { 0% { opacity: 0; transform: translateY(0px); } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(650px); } } @keyframes astronaut { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .box-of-star1, .box-of-star2, .box-of-star3, .box-of-star4 { position: fixed; z-index: 999999; left: 0; top: 0; transform: translateY(0px); width: 100%; height: 100%; } .box-of-star1 {...) |
편집 요약 없음 |
||
(같은 사용자의 중간 판 4개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
@keyframes snow { | @keyframes snow { | ||
0% { | |||
opacity: 0; | |||
transform: translateY(0px); | |||
} | |||
20% { | |||
opacity: 1; | |||
} | |||
100% { | |||
opacity: 1; | |||
transform: translateY(650px); | |||
} | |||
} | } | ||
29번째 줄: | 17번째 줄: | ||
.box-of-star3, | .box-of-star3, | ||
.box-of-star4 { | .box-of-star4 { | ||
position: fixed; | |||
z-index: 999999; | |||
left: 0; | |||
top: 0; | |||
transform: translateY(0px); | |||
width: 100%; | |||
height: 100%; | |||
user-select: none; | |||
pointer-events: none; | |||
} | } | ||
.box-of-star1 { | .box-of-star1 { | ||
animation: snow 5s linear infinite; | |||
} | } | ||
.box-of-star2 { | .box-of-star2 { | ||
animation: snow 5s -1.64s linear infinite; | |||
} | } | ||
.box-of-star3 { | .box-of-star3 { | ||
animation: snow 5s -2.30s linear infinite; | |||
} | } | ||
.box-of-star4 { | .box-of-star4 { | ||
animation: snow 5s -3.30s linear infinite; | |||
} | } | ||
.star { | .star { | ||
width: 3px; | |||
height: 3px; | |||
border-radius: 50%; | |||
background-color: silver; | |||
position: absolute; | |||
z-index: 10; | |||
opacity: 0.7; | |||
} | } | ||
.star:before { | .star:before { | ||
content: ""; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 50%; | |||
background-color: silver; | |||
position: absolute; | |||
z-index: 10; | |||
top: 80px; | |||
left: 70px; | |||
opacity: .7; | |||
} | } | ||
.star:after { | .star:after { | ||
content: ""; | |||
width: 8px; | |||
height: 8px; | |||
border-radius: 50%; | |||
background-color: silver; | |||
position: absolute; | |||
z-index: 10; | |||
top: 8px; | |||
left: 170px; | |||
opacity: .9; | |||
} | } | ||
.star-position1 { | .star-position1 { | ||
top: 30px; | |||
left: 20px; | |||
} | } | ||
.star-position2 { | .star-position2 { | ||
top: 110px; | |||
left: 250px; | |||
} | } | ||
.star-position3 { | .star-position3 { | ||
top: 60px; | |||
left: 570px; | |||
} | } | ||
.star-position4 { | .star-position4 { | ||
top: 120px; | |||
left: 900px; | |||
} | } | ||
.star-position5 { | .star-position5 { | ||
top: 20px; | |||
left: 1120px; | |||
} | } | ||
.star-position6 { | .star-position6 { | ||
top: 90px; | |||
left: 1280px; | |||
} | } | ||
.star-position7 { | .star-position7 { | ||
top: 30px; | |||
left: 1480px; | |||
} | } |
2024년 4월 20일 (토) 23:45 기준 최신판
@keyframes snow {
0% {
opacity: 0;
transform: translateY(0px);
}
20% {
opacity: 1;
}
100% {
opacity: 1;
transform: translateY(650px);
}
}
.box-of-star1,
.box-of-star2,
.box-of-star3,
.box-of-star4 {
position: fixed;
z-index: 999999;
left: 0;
top: 0;
transform: translateY(0px);
width: 100%;
height: 100%;
user-select: none;
pointer-events: none;
}
.box-of-star1 {
animation: snow 5s linear infinite;
}
.box-of-star2 {
animation: snow 5s -1.64s linear infinite;
}
.box-of-star3 {
animation: snow 5s -2.30s linear infinite;
}
.box-of-star4 {
animation: snow 5s -3.30s linear infinite;
}
.star {
width: 3px;
height: 3px;
border-radius: 50%;
background-color: silver;
position: absolute;
z-index: 10;
opacity: 0.7;
}
.star:before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background-color: silver;
position: absolute;
z-index: 10;
top: 80px;
left: 70px;
opacity: .7;
}
.star:after {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background-color: silver;
position: absolute;
z-index: 10;
top: 8px;
left: 170px;
opacity: .9;
}
.star-position1 {
top: 30px;
left: 20px;
}
.star-position2 {
top: 110px;
left: 250px;
}
.star-position3 {
top: 60px;
left: 570px;
}
.star-position4 {
top: 120px;
left: 900px;
}
.star-position5 {
top: 20px;
left: 1120px;
}
.star-position6 {
top: 90px;
left: 1280px;
}
.star-position7 {
top: 30px;
left: 1480px;
}