① css폴더 안의 _manager.css.php, 혹은 style.css 최하단에 하단 코드를 복붙합니다. (.night ~ 부터)
※컬러를 바꾸고 싶으시면, ctrl+F 눌러서 violet 찾은 다음 원하는 컬러로 바꿔줍니다. (ex white, #ffffff 등)
여기서 var(--color-point2)는 색상 설정이니까 ctrl+F로 바꿔주세요!!
혹은
:root {
—-color-point2: yellow;
}
이런 식으로 추가해서 변수에 직접 설정해줄 수도 있습니다
—
.night {
position: fixed;
width: 100%;
height: 100%;
transform: rotateZ(43deg) scale(1.5);
top:-20%;
}
.shooting_star {
position: absolute;
height: 1px;
background: linear-gradient(-45deg, violet, rgba(0, 0, 255, 0));
border-radius: 999px;
filter: drop-shadow(0 0 6px var(--color-point2));
animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 1px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), violet, rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
content: "";
position: absolute;
top: calc(50% - 1px);
right: 0;
height: 1px;
background: linear-gradient(-45deg, rgba(0, 0, 255, 0), violet, rgba(0, 0, 255, 0));
transform: translateX(50%) rotateZ(45deg);
border-radius: 100%;
animation: shining 3000ms ease-in-out infinite;
transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
top: calc(50% - 708px);
left: calc(50% - 217px);
animation-delay: 8842ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after {
animation-delay: 8842ms;
}
.shooting_star:nth-child(2) {
top: calc(50% - 99px);
left: calc(50% - -272px);
animation-delay: 2635ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after {
animation-delay: 2635ms;
}
.shooting_star:nth-child(3) {
top: calc(50% - -140px);
left: calc(50% - 243px);
animation-delay: 2574ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after {
animation-delay: 2574ms;
}
.shooting_star:nth-child(4) {
top: calc(50% - 204px);
left: calc(50% - 248px);
animation-delay: 2904ms;
}
.shooting_star:nth-child(4)::before, .shooting_star:nth-child(4)::after {
animation-delay: 2904ms;
}
.shooting_star:nth-child(5) {
top: calc(50% - -364px);
left: calc(50% - 546px);
animation-delay: 1810ms;
}
.shooting_star:nth-child(5)::before, .shooting_star:nth-child(5)::after {
animation-delay: 1810ms;
}
.shooting_star:nth-child(6) {
top: calc(50% - 459px);
left: calc(50% - -130px);
animation-delay: 7644ms;
}
.shooting_star:nth-child(6)::before, .shooting_star:nth-child(6)::after {
animation-delay: 7644ms;
}
.shooting_star:nth-child(7) {
top: calc(50% - 173px);
left: calc(50% - -22px);
animation-delay: 3185ms;
}
.shooting_star:nth-child(7)::before, .shooting_star:nth-child(7)::after {
animation-delay: 3185ms;
}
.shooting_star:nth-child(8) {
top: calc(50% - -116px);
left: calc(50% - 370px);
animation-delay: 3870ms;
}
.shooting_star:nth-child(8)::before, .shooting_star:nth-child(8)::after {
animation-delay: 3870ms;
}
.shooting_star:nth-child(9) {
top: calc(50% - -306px);
left: calc(50% - -180px);
animation-delay: 75ms;
}
.shooting_star:nth-child(9)::before, .shooting_star:nth-child(9)::after {
animation-delay: 75ms;
}
.shooting_star:nth-child(10) {
top: calc(50% - 369px);
left: calc(50% - 305px);
animation-delay: 3459ms;
}
.shooting_star:nth-child(10)::before, .shooting_star:nth-child(10)::after {
animation-delay: 3459ms;
}
.shooting_star:nth-child(11) {
top: calc(50% - 349px);
left: calc(50% - -44px);
animation-delay: 3068ms;
}
.shooting_star:nth-child(11)::before, .shooting_star:nth-child(11)::after {
animation-delay: 3068ms;
}
.shooting_star:nth-child(12) {
top: calc(50% - -315px);
left: calc(50% - 177px);
animation-delay: 6192ms;
}
.shooting_star:nth-child(12)::before, .shooting_star:nth-child(12)::after {
animation-delay: 6192ms;
}
.shooting_star:nth-child(13) {
top: calc(50% - 1px);
left: calc(50% - 345px);
animation-delay: 797ms;
}
.shooting_star:nth-child(13)::before, .shooting_star:nth-child(13)::after {
animation-delay: 797ms;
}
.shooting_star:nth-child(14) {
top: calc(50% - -254px);
left: calc(50% - 491px);
animation-delay: 7089ms;
}
.shooting_star:nth-child(14)::before, .shooting_star:nth-child(14)::after {
animation-delay: 7089ms;
}
.shooting_star:nth-child(15) {
top: calc(50% - 63px);
left: calc(50% - 51px);
animation-delay: 3933ms;
}
.shooting_star:nth-child(15)::before, .shooting_star:nth-child(15)::after {
animation-delay: 3933ms;
}
.shooting_star:nth-child(16) {
top: calc(50% - -22px);
left: calc(50% - -184px);
animation-delay: 1017ms;
}
.shooting_star:nth-child(16)::before, .shooting_star:nth-child(16)::after {
animation-delay: 1017ms;
}
.shooting_star:nth-child(17) {
top: calc(50% - 479px);
left: calc(50% - -61px);
animation-delay: 5913ms;
}
.shooting_star:nth-child(17)::before, .shooting_star:nth-child(17)::after {
animation-delay: 5913ms;
}
.shooting_star:nth-child(18) {
top: calc(50% - -436px);
left: calc(50% - 78px);
animation-delay: 2980ms;
}
.shooting_star:nth-child(18)::before, .shooting_star:nth-child(18)::after {
animation-delay: 2980ms;
}
.shooting_star:nth-child(19) {
top: calc(50% - -138px);
left: calc(50% - -95px);
animation-delay: 5005ms;
}
.shooting_star:nth-child(19)::before, .shooting_star:nth-child(19)::after {
animation-delay: 5005ms;
}
.shooting_star:nth-child(20) {
top: calc(50% - -996px);
left: calc(50% - 107px);
animation-delay: 4438ms;
}
.shooting_star:nth-child(20)::before, .shooting_star:nth-child(20)::after {
animation-delay: 4438ms;
}
@keyframes tail {
0% {
width: 0;
}
30% {
width: 80px;
}
100% {
width: 0;
}
}
@keyframes shining {
0% {
width: 0;
}
50% {
width: 30px;
}
100% {
width: 0;
}
}
@keyframes shooting {
0% {
transform: translateX(0);
}
100% {
transform: translateX(300px);
}
}
@keyframes sky {
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}
}
②head.php의 <!--헤더 영역--> 바로 위에 아래 코드를 추가합니다.
<div class="night">
<div class="shooting_star"></div>
<div class="shooting_star"></div>
<div class="shooting_star"></div>
</div>
유성우 수를 늘리고 싶으시면
<div class="shooting_star"></div>
위의 코드를 <div class="night">…</div> 사이에 원하는 만큼 추가합니다. (최대 20개까지!)
