Membuat Efek Bintang Pada Mode Malam atau Dark Mode di Blogspot

Efek Bintang Mode Malam atau Dark Mode

Membuat Efek Bintang Pada Mode Malam / Dark Mode - Hai sobat ataeh, menyuguhkan penampilan yang memanjakan visitor atau pengunjung demi kenyamanan visitro dalam membaca artikel kita memang sangat di anjurkan, sehingga perlu kiranya kita membuat Dark Mode atau Mode Malam, dan sebelumnya kita telah membahas tentang Dark Mode : Cara membuat Mode Malam (gelap) di Blogspot.

Bagaimana kalau sekiranyan Dark Mode tersebut sedikit di beri Variasi tampilan yang berupa adanya bintang-bintang dan meteor yang jatuh sehingga tampilan layar kita seolah langit yang gelap disinari oleh kelap kelip bintang serta di bumbui oleh Hujan Meteor (Meteor rain)?

Tentu lebih indah bukan?

Seloah Visitor atau pengunjung yang sedeng membaca artikel kita dia merasa sedang membaca dengan menghadap ke langit malam.

WOOOW... AMAZING...

Lalu, bagaimana caranya menerapkan itu?

Membuat Efek Bintang Pada Mode Malam

• Setelah anda selesai Membuat Dark Mode, silahkan anda Menuju TEMA dan klik EDIT HTML
• Cari Kode ]]></b:skin> biar lebih cepat gunakan CTRL+F
• Letakkan Kode CSS berikut ini Tepat di atas Kode ]]></b:skin>

/* Dark Mode Efek Bintang */
.section-center{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    display: none;
    overflow: hidden;
    z-index: 5;
 pointer-events: none;
    box-shadow: 0 0 50px 5px rgba(255,148,0,.1);
    transform: translate(-50%, -50%);
}
.section-center {
    -webkit-transition: all 500ms linear;
    transition: all 500ms linear;
}
.shooting-star {
 z-index: 2;
 width: 1px;
 height: 50px;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 position: absolute;
 top: 0;
 left: -70px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
 animation: animShootingStar 6s linear infinite;
 -webkit-transition: all 2000ms linear;
 transition: all 2000ms linear; 
}
.shooting-star-2 {
 z-index: 2;
 width: 1px;
 height: 50px;
 border-bottom-left-radius: 50%;
 border-bottom-right-radius: 50%;
 position: absolute;
 top: 0;
 left: 200px;
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
 animation: animShootingStar-2 9s linear infinite;
 -webkit-transition: all 2000ms linear;
 transition: all 2000ms linear; 
}
.star {
 z-index: 2;
 position: absolute;
 top: 185px;
 left: 25px;
 background-image: url('https://ivang-design.com//svg-load/air/star.png');
 background-size: 15px 15px;
 width: 15px;
 height: 15px;
 opacity: 0.4;
 animation: starShine 3.5s linear infinite;
 -webkit-transition: all 1200ms linear;
 transition: all 1200ms linear; 
}
.star.snd {
 top: 100px;
 left: 310px;
 animation-delay: 1s;
}
.star.trd {
 top: 130px;
 left: 100px;
 animation-delay: 1.4s;
}
.star.fth {
 top: 190px;
 left: 200px;
 animation-delay: 1.8s;
}
.star.fith {
 top: 85px;
 left: 1080px;
 animation-delay: 2.2s;
}

@keyframes animShootingStar {
 from {
  transform: translateY(0px) translateX(0px) rotate(-45deg);
  opacity: 1;
  height: 5px;
 }
 to {
  transform: translateY(1280px) translateX(1280px) rotate(-45deg);
  opacity: 1;
  height: 800px;
 }
}
@keyframes animShootingStar-2 {
 from {
  transform: translateY(0px) translateX(0px) rotate(-45deg);
  opacity: 1;
  height: 5px;
 }
 to {
  transform: translateY(1920px) translateX(1920px) rotate(-45deg);
  opacity: 1;
  height: 800px;
 }
}

@keyframes starShine {
 0% {
  transform: scale(0.3) rotate(0deg);
  opacity: 0.4;
 }
 25% {
  transform: scale(1) rotate(360deg);
  opacity: 1;
 }
 50% {
  transform: scale(0.3) rotate(720deg);
  opacity: 0.4;
 }
 100% {
  transform: scale(0.3) rotate(0deg);
  opacity: 0.4;
 }
}



• Terakhir sekarang letakkan Kode HTML di bawah ini di atas </body>

<div class='section-center'> 
 <div class='shooting-star'/>
 <div class='shooting-star-2'/>
 <div class='star'/>
 <div class='star snd'/>
 <div class='star trd'/>
 <div class='star fth'/>
 <div class='star fith'/>
</div>



• Simpan dan Selesai. 

Silahkan lihat hasilnya. bagaimana, luar biasa bukan?

Sekian dulu artikel Membuat Efek Bintang Pada Mode Malam atau Dark Mode di Blogspot, semoga bermanfaat dan Terima kasih

Jika ada yang belum dimengerti, silahkan ditanyakan di kolom komentar

Suhu X

Seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.

Facebook

WhatsApp

Instagram

BAGIKAN ARTIKEL INI

Berlangganan update artikel terbaru via email: