CSS: 웹사이트를 바꿀 하늘 배경

Hello World! 시리즈의 새로운 에피소드! - - 지난 4회는 자바스크립트 트릭이었는데 이번에는 CSS를 보여드리고자 합니다. 의 다른 모든 에피소드처럼 20줄을 넘지 않도록 노력하겠습니다. 그래서 나는 그것을 두 개의 큰 부분으로 나눌 것입니다. 첫 번째에서는 구름으로 배경을 만드는 방법을, 두 번째에서는 비 효과를 만드는 방법(사용자가 무언가를 가리키거나 잘못된 정보를 입력할 때)을 발견할 것입니다. 시작하자!

배경:

body {
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: #22c5ff; // A blue that seems the sky
  display: flex;
  justify-content: center;
  flex-direction: column;
}

구름:

HTML:

<div id="background-wrap">
  <div class="x1">
    <div class="cloud"></div>
  </div>

  <div class="x2">
    <div class="cloud"></div>
  </div>

  <div class="x3">
    <div class="cloud"></div>
  </div>

  <div class="x4">
    <div class="cloud"></div>
  </div>

  <div class="x5">
    <div class="cloud"></div>
  </div>
</div>

우리는 6개의 div를 만들고 있는데, 5는 클라우드이고 1은 컨테이너입니다.

CSS:

먼저 컨테이너의 스타일을 지정합니다.

#background-wrap {
  bottom: 0;
  left: 0;
  padding-top: 50px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

이제 모든 구름의 스타일을 지정합니다.

.cloud {
  background: #fff;
  background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
  border-radius: 100px;
  box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
  height: 120px;
  position: relative;
  width: 350px;
}

.cloud:after,
.cloud:before {
  background: #fff;
  content: "";
  position: absolute;
  z-index: -1;
}

.cloud:after {
  border-radius: 100px;
  height: 100px;
  left: 50px;
  top: -50px;
  width: 100px;
}

.cloud:before {
  border-radius: 200px;
  width: 180px;
  height: 180px;
  right: 50px;
  top: -90px;
}

그런 다음 고유하게 보이도록 각 클라우드의 스타일을 지정합니다.

.x1 {
  animation: animateCloud 35s linear infinite; // The animation will be infinite, when a cloud disappear from one side it will reappear on the other
  transform: scale(0.65);
}

.x2 {
  animation: animateCloud 20s linear infinite;
  transform: scale(0.3);
}

.x3 {
  animation: animateCloud 30s linear infinite;
  transform: scale(0.5);
}

.x4 {
  animation: animateCloud 18s linear infinite;
  transform: scale(0.4);
}

.x5 {
  animation: animateCloud 25s linear infinite; 
  transform: scale(0.55);
}

따라서 각 구름은 크기(스케일)와 속도(애니메이션을 완료하는 데 걸리는 초)가 다릅니다.

이제 애니메이션 "animateCloud"를 추가합니다.

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }
  100% {
    margin-left: 100%;
  }
}

구름이 왼쪽에서 오른쪽으로 이동하도록 여백을 변경했을 뿐입니다.

비를 내리십시오:

.rain 클래스가 있는 div/section만 있으면 됩니다. 동적으로 만들려면 내가 설명하는 것처럼 자바 스크립트에 클래스를 추가할 수 있습니다.

.rain {
  width: 100%;
  height: 100vh;
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(https://media.geeksforgeeks.org/wp-content/uploads/20200828184719/rain-300x300.png);
  animation: rain 0.5s linear infinite;
  opacity: 0;
}

그리고 애니메이션...

@keyframes rain {
  0% {
    background-position: 0 0;
    opacity: 1;
  }

  100% {
    background-position: 10% 60%;
    opacity: 1;
  }
}

여기에서 실시간 미리보기를 할 수 있습니다.
Open Me 전체 화면 최고의 경험을 위해:




도움이 되었기를 바라며 읽어주셔서 감사합니다!

Please smash that like button to make me understand that you want the series to continue :)

내 뉴스레터를 구독하세요!

재미있고 유익한 주간 요약
내 기사의 무료 PDF 버전
고도로 사용자 정의 가능한 받은 편지함
그것은 --> 무료입니다 <-- 그리고 당신은 나를 도와줍니다!