SCSS Halloween Mặt trăng huyền bí

Halloween Moon

Hãy cùng tạo ra một Mặt trăng mang đậm chất Halloween để mang vào website bạn nhé.

SCSS

html,body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

.animation {
  -webkit-transition: all 5s ease-in-out;
  -moz-transition: all 5s ease-in-out;
  -o-transition: all 5s ease-in-out;
  transition: all 5s ease-in-out;
}

.main_content {
  width: 100%;
  height: 100%;
  background-color: #2c3e50;
}

.moon {
  position: absolute;
  width: 200px;
  height: 200px;
  margin-top: 20%;
  margin-left: 50%;
  left: -100px;
  border-radius: 100%;
  background-color: #bdc3c7;
  box-shadow: 0px 0px 50px #ffffff;
  opacity: 0.9;

  .moon_crater_big {
    position: absolute;
    width: 80px;
    height: 80px;
    margin-top: 15%;
    margin-left: 50%;
    border-radius: 100%;
    background-color: #95a5a6;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
  }

  .moon_crater_middle {
    position: absolute;
    width: 60px;
    height: 60px;
    margin-top: 35%;
    margin-left: 10%;
    border-radius: 100%;
    background-color: #95a5a6;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
  }

  .moon_crater_small {
    position: absolute;
    width: 40px;
    height: 40px;
    margin-top: 70%;
    margin-left: 40%;
    border-radius: 100%;
    background-color: #95a5a6;
    -moz-box-shadow:    inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
    box-shadow:         inset 0 0 10px #000000;
  }
}

.moon:hover {
  -moz-transform: rotate(360deg);
  -ms-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
}

.clouds {
  position: absolute;
  width: 120px;
  height: 40px;
  border-radius: 40px;
  background-color: white;
  opacity: 0.8;
  -webkit-animation: clouds_move 15s infinite; /* Chrome, Safari, Opera */
  animation: clouds_move 15s infinite;

  .cloud_left_plushy_part {
    position: absolute;
    margin-top: -10px;
    margin-left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background-color: white;
  }

  .cloud_right_plushy_part {
    position: absolute;
    margin-top: -20px;
    margin-left: 40px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: white;
  }
}

.top_left {
  margin-top: 20%;
  margin-left: 40%;
  margin-right: 60%;
  margin-bottom: 80%;
}

.bottom_left {
  margin-top: 30%;
  margin-left: 35%;
  margin-right: 65%;
  margin-bottom: 70%;
}

.top_right {
  margin-top: 25%;
  margin-left: 55%;
  margin-right: 45%;
  margin-bottom: 75%;
}

.bottom_right {
  margin-top: 30%;
  margin-left: 50%;
  margin-right: 50%;
  margin-bottom: 70%;
}





@-webkit-keyframes clouds_move {
  0% {left: -100px;}
  50% {left: 100px;}
  100% {left: -100px;}
}

@keyframes clouds_move {
  0% {left: -100px;}
  50% {left: 100px;}
  100% {left: -100px;}
}

HTML

<div class="main_content">
  <div class="moon animation">
    <div class="moon_crater_big"></div>
    <div class="moon_crater_middle"></div>
    <div class="moon_crater_small"></div> 
  </div>
  <div class="clouds top_left">
    <div class="cloud_left_plushy_part"></div>
    <div class="cloud_right_plushy_part"></div>
  </div>
  <div class="clouds bottom_left">
    <div class="cloud_left_plushy_part"></div>
    <div class="cloud_right_plushy_part"></div>
  </div>
  <div class="clouds top_right">
    <div class="cloud_left_plushy_part"></div>
    <div class="cloud_right_plushy_part"></div>
  </div>
  <div class="clouds bottom_right">
    <div class="cloud_left_plushy_part"></div>
    <div class="cloud_right_plushy_part"></div>
  </div>
</div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by nikname/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm