편집토론문서 역사

틀:Snowfalling/styles.css: 두 판 사이의 차이

< 틀:Snowfalling
편집 요약 없음
편집 요약 없음
1번째 줄: 1번째 줄:
@keyframes snow {
@keyframes snow {
  0% {
0% {
    opacity: 0;
opacity: 0;
    transform: translateY(0px);
transform: translateY(0px);
  }
}
 
20% {
  20% {
opacity: 1;
    opacity: 1;
}
  }
100% {
 
opacity: 1;
  100% {
transform: translateY(650px);
    opacity: 1;
}
    transform: translateY(650px);
  }
}
 
@keyframes astronaut {
  0% {
    transform: rotate(0deg);
  }
 
  100% {
    transform: rotate(360deg);
  }
}
}


29번째 줄: 17번째 줄:
.box-of-star3,
.box-of-star3,
.box-of-star4 {
.box-of-star4 {
  position: fixed;
position: fixed;
  z-index: -3;
z-index: -3;
  left: 0;
left: 0;
  top: 0;
top: 0;
  transform: translateY(0px);
transform: translateY(0px);
  width: 100%;
width: 100%;
  height: 100%;
height: 100%;
}
}
.box-of-star1 {
.box-of-star1 {
  animation: snow 5s linear infinite;
animation: snow 5s linear infinite;
}
}
.box-of-star2 {
.box-of-star2 {
  animation: snow 5s -1.64s linear infinite;
animation: snow 5s -1.64s linear infinite;
}
}
.box-of-star3 {
.box-of-star3 {
  animation: snow 5s -2.30s linear infinite;
animation: snow 5s -2.30s linear infinite;
}
}
.box-of-star4 {
.box-of-star4 {
  animation: snow 5s -3.30s linear infinite;
animation: snow 5s -3.30s linear infinite;
}
}
.star {
.star {
  width: 3px;
width: 3px;
  height: 3px;
height: 3px;
  border-radius: 50%;
border-radius: 50%;
  background-color: silver;
background-color: silver;
  position: absolute;
position: absolute;
  z-index: 10;
z-index: 10;
  opacity: 0.7;
opacity: 0.7;
}
}
.star:before {
.star:before {
  content: "";
content: "";
  width: 6px;
width: 6px;
  height: 6px;
height: 6px;
  border-radius: 50%;
border-radius: 50%;
  background-color: silver;
background-color: silver;
  position: absolute;
position: absolute;
  z-index: 10;
z-index: 10;
  top: 80px;
top: 80px;
  left: 70px;
left: 70px;
  opacity: .7;
opacity: .7;
}
}
.star:after {
.star:after {
  content: "";
content: "";
  width: 8px;
width: 8px;
  height: 8px;
height: 8px;
  border-radius: 50%;
border-radius: 50%;
  background-color: silver;
background-color: silver;
  position: absolute;
position: absolute;
  z-index: 10;
z-index: 10;
  top: 8px;
top: 8px;
  left: 170px;
left: 170px;
  opacity: .9;
opacity: .9;
}
}
.star-position1 {
.star-position1 {
  top: 30px;
top: 30px;
  left: 20px;
left: 20px;
}
}
.star-position2 {
.star-position2 {
  top: 110px;
top: 110px;
  left: 250px;
left: 250px;
}
}
.star-position3 {
.star-position3 {
  top: 60px;
top: 60px;
  left: 570px;
left: 570px;
}
}
.star-position4 {
.star-position4 {
  top: 120px;
top: 120px;
  left: 900px;
left: 900px;
}
}
.star-position5 {
.star-position5 {
  top: 20px;
top: 20px;
  left: 1120px;
left: 1120px;
}
}
.star-position6 {
.star-position6 {
  top: 90px;
top: 90px;
  left: 1280px;
left: 1280px;
}
}
.star-position7 {
.star-position7 {
  top: 30px;
top: 30px;
  left: 1480px;
left: 1480px;
}
}

2024년 4월 17일 (수) 22:15 판

@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: -3;
	left: 0;
	top: 0;
	transform: translateY(0px);
	width: 100%;
	height: 100%;
}
.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;
}