편집토론문서 역사

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

< 틀:1961 비
(새 문서: body { overflow: hidden; } #background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } #background.night { background: linear-gradient(#0F2129, #47334A);...)
 
편집 요약 없음
1번째 줄: 1번째 줄:
html {
  height: 100%;
}
body {
body {
  background: #222222;
  box-shadow: inset 0 0 400px #111111;
  height: 100%;
   overflow: hidden;
   overflow: hidden;
  position: relative;
}
}


#background {
.rain {
   position: absolute;
   background: white;
  top: 0;
   background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
  left: 0;
   height: 50px;
  right: 0;
  bottom: 0;
}
 
#background.night {
   background: linear-gradient(#0F2129, #47334A);
}
 
#background>.cloud {
  width: 900px;
   height: 900px;
   position: absolute;
   position: absolute;
  background-color: #fff;
   width: 1px;
  border-radius: 50%;
  animation: cloud 10s infinite alternate;
}
 
#background.rain>.cloud {
  opacity: .5;
}
 
#background>.cloud:nth-child(even) {
  animation-delay: 3s;
}
 
#background.night>.cloud {
  background-color: grey;
}
 
#background.rain>.cloud:before,
#background.rain>.cloud:after {
  animation: rain 1s infinite linear;
  content: '';
  border-radius: 50%;
  display: block;
  height: 6px;
   width: 3px;
  opacity: 1;
  margin-top: 700px;
}
 
#background.rain>.cloud:after {
  transform: translate(50px);
}
 
#background.rain>.cloud:nth-child(even):before,
#background.rain>.cloud:nth-child(even):after {
  animation-delay: .3s;
}
 
@keyframes rain {
  0% {
    box-shadow: #cccccc 30px 30px, #cccccc 40px 40px, #cccccc 50px 75px, #cccccc 55px 50px, #cccccc 70px 100px, #cccccc 80px 95px, #cccccc 110px 45px, #cccccc 75px 50px, #cccccc 80px 20px, #cccccc 65px 40px, #cccccc 100px 80px, #cccccc 45px 85px, #cccccc 95px 50px, #cccccc 90px 35px;
  }
  100% {
    box-shadow: #cccccc 30px 970px, #cccccc 40px 980px, #cccccc 50px 945px, #cccccc 55px 980px, #cccccc 70px 960px, #cccccc 80px 945px, #cccccc 110px 995px, #cccccc 75px 950px, #cccccc 80px 920px, #cccccc 65px 940px, #cccccc 100px 980px, #cccccc 45px 985px, #cccccc 95px 950px, #cccccc 90px 985px;
  }
}
 
@keyframes cloud {
  100% {
    transform: translate(-50px) scale(1.05);
  }
}
}

2023년 11월 6일 (월) 00:39 판

html {
  height: 100%;
}

body {
  background: #222222;
  box-shadow: inset 0 0 400px #111111;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.rain {
  background: white;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #ffffff 100%);
  height: 50px;
  position: absolute;
  width: 1px;
}