สร้างภาพเคลื่อนไหว เกล็ดหิมะ ( Snow flakes) บนเว็บไซต์ HTML & CSS

by boychawin

October 14, 2020 3,097

แจกตัวอย่าง สร้างภาพเคลื่อนไหว เกล็ดหิมะ (Snow flakes) บนเว็บไซต์ HTML & CSS

สิ่งที่ต้องรู้ก่อน

- คัดลอกโค้ดตัวอย่างไปใช้ได้เลย สามารถปรับเปลี่ยนได้ตามความต้องการของท่านได้เลยครับ

ตัวอย่างโค้ดแบบเต็ม

- ขอบคุณข้อมูลจาก pajasevi.github.io/CSSnowflakes

GitHub

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เกล็ดหิมะ css โดย boychawin.com</title>
  <style>
    html,
    body {
      background: #1b2836;
    }

    /* หิมะ */

    .snowflake {
      color: #fff;
      font-size: 1em;
      font-family: Arial;
      text-shadow: 0 0 1px #000;
    }

    @-webkit-keyframes snowflakes-fall {
      0% {
        top: -10%
      }

      100% {
        top: 100%
      }
    }

    @-webkit-keyframes snowflakes-shake {
      0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
      }

      50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
      }

      100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
      }
    }

    @keyframes snowflakes-fall {
      0% {
        top: -10%
      }

      100% {
        top: 100%
      }
    }

    @keyframes snowflakes-shake {
      0% {
        transform: translateX(0px)
      }

      50% {
        transform: translateX(80px)
      }

      100% {
        transform: translateX(0px)
      }
    }

    .snowflake {
      position: fixed;
      top: -10%;
      z-index: 9999;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
      -webkit-animation-name: snowflakes-fall, snowflakes-shake;
      -webkit-animation-duration: 18s, 5s;
      -webkit-animation-timing-function: linear, ease-in-out;
      -webkit-animation-iteration-count: infinite, infinite;
      -webkit-animation-play-state: running, running;
      animation-name: snowflakes-fall, snowflakes-shake;
      animation-duration: 18s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-play-state: running, running
    }

    .snowflake:nth-of-type(0) {
      left: 1%;
      -webkit-animation-delay: 0s, 0s;
      animation-delay: 0s, 0s
    }

    .snowflake:nth-of-type(1) {
      left: 10%;
      -webkit-animation-delay: 1s, 1s;
      animation-delay: 1s, 1s
    }

    .snowflake:nth-of-type(2) {
      left: 20%;
      -webkit-animation-delay: 6s, .5s;
      animation-delay: 6s, .5s
    }

    .snowflake:nth-of-type(3) {
      left: 30%;
      -webkit-animation-delay: 4s, 2s;
      animation-delay: 4s, 2s
    }

    .snowflake:nth-of-type(4) {
      left: 40%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s
    }

    .snowflake:nth-of-type(5) {
      left: 50%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s
    }

    .snowflake:nth-of-type(6) {
      left: 60%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s
    }

    .snowflake:nth-of-type(7) {
      left: 70%;
      -webkit-animation-delay: 2.5s, 1s;
      animation-delay: 2.5s, 1s
    }

    .snowflake:nth-of-type(8) {
      left: 80%;
      -webkit-animation-delay: 1s, 0s;
      animation-delay: 1s, 0s
    }

    .snowflake:nth-of-type(9) {
      left: 90%;
      -webkit-animation-delay: 3s, 1.5s;
      animation-delay: 3s, 1.5s
    }

    .snowflake:nth-of-type(10) {
      right: 5%;
      -webkit-animation-delay: 10s, 10s;
      animation-delay: 10s, 10s
    }

    .snowflake:nth-of-type(11) {
      right: 15%;
      -webkit-animation-delay: 10s, 10s;
      animation-delay: 10s, 10s
    }

    .snowflake:nth-of-type(12) {
      right: 25%;
      -webkit-animation-delay: 60s, 50s;
      animation-delay: 60s, 50s
    }

    .snowflake:nth-of-type(13) {
      right: 35%;
      -webkit-animation-delay: 40s, 20s;
      animation-delay: 40s, 20s
    }

    .snowflake:nth-of-type(14) {
      right: 45%;
      -webkit-animation-delay: 20s, 20s;
      animation-delay: 20s, 20s
    }

    .snowflake:nth-of-type(15) {
      right: 55%;
      -webkit-animation-delay: 8.5s, 3.5s;
      animation-delay: 8.5s, 3.5s
    }

    .snowflake:nth-of-type(16) {
      right: 65%;
      -webkit-animation-delay: 60.5s, 20.5s;
      animation-delay: 60.5s, 20.5s
    }

    .snowflake:nth-of-type(17) {
      right: 75%;
      -webkit-animation-delay: 30s, 10.5s;
      animation-delay: 30s, 10.5s
    }

    .snowflake:nth-of-type(18) {
      right: 85%;
      -webkit-animation-delay: 10.5s, 0.5s;
      animation-delay: 10.5s, 0.5s
    }

    .snowflake:nth-of-type(19) {
      right: 95%;
      -webkit-animation-delay: 30.5s, 20s;
      animation-delay: 30.5s, 20s
    }
  </style>
</head>

<body>

  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>

  </div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>เกล็ดหิมะ css โดย boychawin.com</title>
  <style>
    html,
    body {
      background: #1b2836;
    }

    /* หิมะ */

    .snowflake {
      color: #fff;
      font-size: 1em;
      font-family: Arial;
      text-shadow: 0 0 1px #000;
    }

    @-webkit-keyframes snowflakes-fall {
      0% {
        top: -10%
      }

      100% {
        top: 100%
      }
    }

    @-webkit-keyframes snowflakes-shake {
      0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
      }

      50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px)
      }

      100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px)
      }
    }

    @keyframes snowflakes-fall {
      0% {
        top: -10%
      }

      100% {
        top: 100%
      }
    }

    @keyframes snowflakes-shake {
      0% {
        transform: translateX(0px)
      }

      50% {
        transform: translateX(80px)
      }

      100% {
        transform: translateX(0px)
      }
    }

    .snowflake {
      position: fixed;
      top: -10%;
      z-index: 9999;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
      -webkit-animation-name: snowflakes-fall, snowflakes-shake;
      -webkit-animation-duration: 18s, 5s;
      -webkit-animation-timing-function: linear, ease-in-out;
      -webkit-animation-iteration-count: infinite, infinite;
      -webkit-animation-play-state: running, running;
      animation-name: snowflakes-fall, snowflakes-shake;
      animation-duration: 18s, 5s;
      animation-timing-function: linear, ease-in-out;
      animation-iteration-count: infinite, infinite;
      animation-play-state: running, running
    }

    .snowflake:nth-of-type(0) {
      left: 1%;
      -webkit-animation-delay: 0s, 0s;
      animation-delay: 0s, 0s
    }

    .snowflake:nth-of-type(1) {
      left: 10%;
      -webkit-animation-delay: 1s, 1s;
      animation-delay: 1s, 1s
    }

    .snowflake:nth-of-type(2) {
      left: 20%;
      -webkit-animation-delay: 6s, .5s;
      animation-delay: 6s, .5s
    }

    .snowflake:nth-of-type(3) {
      left: 30%;
      -webkit-animation-delay: 4s, 2s;
      animation-delay: 4s, 2s
    }

    .snowflake:nth-of-type(4) {
      left: 40%;
      -webkit-animation-delay: 2s, 2s;
      animation-delay: 2s, 2s
    }

    .snowflake:nth-of-type(5) {
      left: 50%;
      -webkit-animation-delay: 8s, 3s;
      animation-delay: 8s, 3s
    }

    .snowflake:nth-of-type(6) {
      left: 60%;
      -webkit-animation-delay: 6s, 2s;
      animation-delay: 6s, 2s
    }

    .snowflake:nth-of-type(7) {
      left: 70%;
      -webkit-animation-delay: 2.5s, 1s;
      animation-delay: 2.5s, 1s
    }

    .snowflake:nth-of-type(8) {
      left: 80%;
      -webkit-animation-delay: 1s, 0s;
      animation-delay: 1s, 0s
    }

    .snowflake:nth-of-type(9) {
      left: 90%;
      -webkit-animation-delay: 3s, 1.5s;
      animation-delay: 3s, 1.5s
    }

    .snowflake:nth-of-type(10) {
      right: 5%;
      -webkit-animation-delay: 10s, 10s;
      animation-delay: 10s, 10s
    }

    .snowflake:nth-of-type(11) {
      right: 15%;
      -webkit-animation-delay: 10s, 10s;
      animation-delay: 10s, 10s
    }

    .snowflake:nth-of-type(12) {
      right: 25%;
      -webkit-animation-delay: 60s, 50s;
      animation-delay: 60s, 50s
    }

    .snowflake:nth-of-type(13) {
      right: 35%;
      -webkit-animation-delay: 40s, 20s;
      animation-delay: 40s, 20s
    }

    .snowflake:nth-of-type(14) {
      right: 45%;
      -webkit-animation-delay: 20s, 20s;
      animation-delay: 20s, 20s
    }

    .snowflake:nth-of-type(15) {
      right: 55%;
      -webkit-animation-delay: 8.5s, 3.5s;
      animation-delay: 8.5s, 3.5s
    }

    .snowflake:nth-of-type(16) {
      right: 65%;
      -webkit-animation-delay: 60.5s, 20.5s;
      animation-delay: 60.5s, 20.5s
    }

    .snowflake:nth-of-type(17) {
      right: 75%;
      -webkit-animation-delay: 30s, 10.5s;
      animation-delay: 30s, 10.5s
    }

    .snowflake:nth-of-type(18) {
      right: 85%;
      -webkit-animation-delay: 10.5s, 0.5s;
      animation-delay: 10.5s, 0.5s
    }

    .snowflake:nth-of-type(19) {
      right: 95%;
      -webkit-animation-delay: 30.5s, 20s;
      animation-delay: 30.5s, 20s
    }
  </style>
</head>

<body>

  <div class="snowflakes" aria-hidden="true">
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>
    <div class="snowflake">
      ❅
    </div>
    <div class="snowflake">
      ❆
    </div>
    <div class="snowflake">
      ❄
    </div>

  </div>

</body>

</html>

เกล็ดหิมะ

บทความอื่นที่น่าสนใจ

ติดตาม Facebook

ยอดนิยมวันนี้

ยอดนิยม

เว็บเทรด Bitcoin

Binance เว็บซื้อขาย Bitcoin อันดับ 1 ของโลก