Bunga api

Selamat Tahun Baru Cina. Agak terlambat nak beri ucap selamat. Seminggu dah. Bagaimanapun, mercun masih sekali sekala kedengaran dan bunga api masih kelihatan di satu dua tempat pada waktu malam.

Demo

Buat bunga api guna CSS sahaja. Kod htmlnya panjang berjela.

HTML view ▼

<div class="bungapi"><div class="pyro">
  <div class="before"></div>
  <div class="after"></div>
  </div></div>
<style type="text/css">
.bungapi {
  margin: 0;
  padding: 0;
  background: #111;
  height: 480px;
}
.pyro > .before, .pyro > .after {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s;
}
@-webkit-keyframes bang {
  to {
    box-shadow: -186px -205.6666666667px #ff003c, 104px -112.6666666667px #ff00a6, 8px -203.6666666667px #ff7300, 62px -280.6666666667px #b7ff00, -130px -334.6666666667px #ff009d, 109px 35.3333333333px #00ffbb, 105px -137.6666666667px #9900ff, 19px 38.3333333333px #00ff1e, -160px -179.6666666667px #c4ff00, -120px -180.6666666667px #00ff8c, -193px -259.6666666667px #0dff00, 211px -41.6666666667px #b7ff00, -128px -253.6666666667px darkorange, 233px -129.6666666667px #00ffe6, 198px -296.6666666667px #04ff00, -156px -195.6666666667px #91ff00, 25px -104.6666666667px #2200ff, -174px -265.6666666667px yellow, -87px 69.3333333333px #0091ff, 30px -330.6666666667px #a2ff00, -37px -330.6666666667px #fb00ff, 111px -192.6666666667px #00ff2f, -97px -14.6666666667px #0900ff, 29px -191.6666666667px #00ff55, 167px -362.6666666667px #00ff77, 61px -148.6666666667px #ffea00, -137px -31.6666666667px #04ff00, -145px -78.6666666667px #00ff22, -154px -406.6666666667px #ff2b00, 89px -93.6666666667px #00ff62, -3px 59.3333333333px #00ff15, -240px -346.6666666667px #ff00a2, -198px -282.6666666667px #ff00aa, 193px -322.6666666667px #00ff55, 61px 63.3333333333px #ffaa00, -127px -207.6666666667px #5e00ff, -80px -231.6666666667px #ff0026, 111px -243.6666666667px #fff200, -69px -54.6666666667px #ff4400, -104px -51.6666666667px #0091ff, 244px -142.6666666667px #ff7300, 18px -352.6666666667px #e1ff00, -123px -144.6666666667px #ff2600, -158px -414.6666666667px #00e6ff, -74px -351.6666666667px #00ffc4, -100px -395.6666666667px #00ff73, -207px -199.6666666667px #ff0400, -60px -21.6666666667px #11ff00, 125px -179.6666666667px #7300ff, 207px -149.6666666667px #00ff2b, 107px -174.6666666667px #0062ff;
  }
}
@-moz-keyframes bang {
  to {
    box-shadow: -186px -205.6666666667px #ff003c, 104px -112.6666666667px #ff00a6, 8px -203.6666666667px #ff7300, 62px -280.6666666667px #b7ff00, -130px -334.6666666667px #ff009d, 109px 35.3333333333px #00ffbb, 105px -137.6666666667px #9900ff, 19px 38.3333333333px #00ff1e, -160px -179.6666666667px #c4ff00, -120px -180.6666666667px #00ff8c, -193px -259.6666666667px #0dff00, 211px -41.6666666667px #b7ff00, -128px -253.6666666667px darkorange, 233px -129.6666666667px #00ffe6, 198px -296.6666666667px #04ff00, -156px -195.6666666667px #91ff00, 25px -104.6666666667px #2200ff, -174px -265.6666666667px yellow, -87px 69.3333333333px #0091ff, 30px -330.6666666667px #a2ff00, -37px -330.6666666667px #fb00ff, 111px -192.6666666667px #00ff2f, -97px -14.6666666667px #0900ff, 29px -191.6666666667px #00ff55, 167px -362.6666666667px #00ff77, 61px -148.6666666667px #ffea00, -137px -31.6666666667px #04ff00, -145px -78.6666666667px #00ff22, -154px -406.6666666667px #ff2b00, 89px -93.6666666667px #00ff62, -3px 59.3333333333px #00ff15, -240px -346.6666666667px #ff00a2, -198px -282.6666666667px #ff00aa, 193px -322.6666666667px #00ff55, 61px 63.3333333333px #ffaa00, -127px -207.6666666667px #5e00ff, -80px -231.6666666667px #ff0026, 111px -243.6666666667px #fff200, -69px -54.6666666667px #ff4400, -104px -51.6666666667px #0091ff, 244px -142.6666666667px #ff7300, 18px -352.6666666667px #e1ff00, -123px -144.6666666667px #ff2600, -158px -414.6666666667px #00e6ff, -74px -351.6666666667px #00ffc4, -100px -395.6666666667px #00ff73, -207px -199.6666666667px #ff0400, -60px -21.6666666667px #11ff00, 125px -179.6666666667px #7300ff, 207px -149.6666666667px #00ff2b, 107px -174.6666666667px #0062ff;
  }
}
@-o-keyframes bang {
  to {
    box-shadow: -186px -205.6666666667px #ff003c, 104px -112.6666666667px #ff00a6, 8px -203.6666666667px #ff7300, 62px -280.6666666667px #b7ff00, -130px -334.6666666667px #ff009d, 109px 35.3333333333px #00ffbb, 105px -137.6666666667px #9900ff, 19px 38.3333333333px #00ff1e, -160px -179.6666666667px #c4ff00, -120px -180.6666666667px #00ff8c, -193px -259.6666666667px #0dff00, 211px -41.6666666667px #b7ff00, -128px -253.6666666667px darkorange, 233px -129.6666666667px #00ffe6, 198px -296.6666666667px #04ff00, -156px -195.6666666667px #91ff00, 25px -104.6666666667px #2200ff, -174px -265.6666666667px yellow, -87px 69.3333333333px #0091ff, 30px -330.6666666667px #a2ff00, -37px -330.6666666667px #fb00ff, 111px -192.6666666667px #00ff2f, -97px -14.6666666667px #0900ff, 29px -191.6666666667px #00ff55, 167px -362.6666666667px #00ff77, 61px -148.6666666667px #ffea00, -137px -31.6666666667px #04ff00, -145px -78.6666666667px #00ff22, -154px -406.6666666667px #ff2b00, 89px -93.6666666667px #00ff62, -3px 59.3333333333px #00ff15, -240px -346.6666666667px #ff00a2, -198px -282.6666666667px #ff00aa, 193px -322.6666666667px #00ff55, 61px 63.3333333333px #ffaa00, -127px -207.6666666667px #5e00ff, -80px -231.6666666667px #ff0026, 111px -243.6666666667px #fff200, -69px -54.6666666667px #ff4400, -104px -51.6666666667px #0091ff, 244px -142.6666666667px #ff7300, 18px -352.6666666667px #e1ff00, -123px -144.6666666667px #ff2600, -158px -414.6666666667px #00e6ff, -74px -351.6666666667px #00ffc4, -100px -395.6666666667px #00ff73, -207px -199.6666666667px #ff0400, -60px -21.6666666667px #11ff00, 125px -179.6666666667px #7300ff, 207px -149.6666666667px #00ff2b, 107px -174.6666666667px #0062ff;
  }
}
@-ms-keyframes bang {
  to {
    box-shadow: -186px -205.6666666667px #ff003c, 104px -112.6666666667px #ff00a6, 8px -203.6666666667px #ff7300, 62px -280.6666666667px #b7ff00, -130px -334.6666666667px #ff009d, 109px 35.3333333333px #00ffbb, 105px -137.6666666667px #9900ff, 19px 38.3333333333px #00ff1e, -160px -179.6666666667px #c4ff00, -120px -180.6666666667px #00ff8c, -193px -259.6666666667px #0dff00, 211px -41.6666666667px #b7ff00, -128px -253.6666666667px darkorange, 233px -129.6666666667px #00ffe6, 198px -296.6666666667px #04ff00, -156px -195.6666666667px #91ff00, 25px -104.6666666667px #2200ff, -174px -265.6666666667px yellow, -87px 69.3333333333px #0091ff, 30px -330.6666666667px #a2ff00, -37px -330.6666666667px #fb00ff, 111px -192.6666666667px #00ff2f, -97px -14.6666666667px #0900ff, 29px -191.6666666667px #00ff55, 167px -362.6666666667px #00ff77, 61px -148.6666666667px #ffea00, -137px -31.6666666667px #04ff00, -145px -78.6666666667px #00ff22, -154px -406.6666666667px #ff2b00, 89px -93.6666666667px #00ff62, -3px 59.3333333333px #00ff15, -240px -346.6666666667px #ff00a2, -198px -282.6666666667px #ff00aa, 193px -322.6666666667px #00ff55, 61px 63.3333333333px #ffaa00, -127px -207.6666666667px #5e00ff, -80px -231.6666666667px #ff0026, 111px -243.6666666667px #fff200, -69px -54.6666666667px #ff4400, -104px -51.6666666667px #0091ff, 244px -142.6666666667px #ff7300, 18px -352.6666666667px #e1ff00, -123px -144.6666666667px #ff2600, -158px -414.6666666667px #00e6ff, -74px -351.6666666667px #00ffc4, -100px -395.6666666667px #00ff73, -207px -199.6666666667px #ff0400, -60px -21.6666666667px #11ff00, 125px -179.6666666667px #7300ff, 207px -149.6666666667px #00ff2b, 107px -174.6666666667px #0062ff;
  }
}
@keyframes bang {
  to {
    box-shadow: -186px -205.6666666667px #ff003c, 104px -112.6666666667px #ff00a6, 8px -203.6666666667px #ff7300, 62px -280.6666666667px #b7ff00, -130px -334.6666666667px #ff009d, 109px 35.3333333333px #00ffbb, 105px -137.6666666667px #9900ff, 19px 38.3333333333px #00ff1e, -160px -179.6666666667px #c4ff00, -120px -180.6666666667px #00ff8c, -193px -259.6666666667px #0dff00, 211px -41.6666666667px #b7ff00, -128px -253.6666666667px darkorange, 233px -129.6666666667px #00ffe6, 198px -296.6666666667px #04ff00, -156px -195.6666666667px #91ff00, 25px -104.6666666667px #2200ff, -174px -265.6666666667px yellow, -87px 69.3333333333px #0091ff, 30px -330.6666666667px #a2ff00, -37px -330.6666666667px #fb00ff, 111px -192.6666666667px #00ff2f, -97px -14.6666666667px #0900ff, 29px -191.6666666667px #00ff55, 167px -362.6666666667px #00ff77, 61px -148.6666666667px #ffea00, -137px -31.6666666667px #04ff00, -145px -78.6666666667px #00ff22, -154px -406.6666666667px #ff2b00, 89px -93.6666666667px #00ff62, -3px 59.3333333333px #00ff15, -240px -346.6666666667px #ff00a2, -198px -282.6666666667px #ff00aa, 193px -322.6666666667px #00ff55, 61px 63.3333333333px #ffaa00, -127px -207.6666666667px #5e00ff, -80px -231.6666666667px #ff0026, 111px -243.6666666667px #fff200, -69px -54.6666666667px #ff4400, -104px -51.6666666667px #0091ff, 244px -142.6666666667px #ff7300, 18px -352.6666666667px #e1ff00, -123px -144.6666666667px #ff2600, -158px -414.6666666667px #00e6ff, -74px -351.6666666667px #00ffc4, -100px -395.6666666667px #00ff73, -207px -199.6666666667px #ff0400, -60px -21.6666666667px #11ff00, 125px -179.6666666667px #7300ff, 207px -149.6666666667px #00ff2b, 107px -174.6666666667px #0062ff;
  }
}
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0;
  }
}
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }
  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }
  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }
  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }
  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}</style>

Tutup

CSS disesuaikan untuk paparan di blog ini, dipetik dari codepen.