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;
}
}
<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>
Silahkan lihat hasilnya. bagaimana, luar biasa bukan?
Jika ada yang belum dimengerti, silahkan ditanyakan di kolom komentar

Thanks for taking the time to discuss this, I feel strongly that love and read more on this topic. If possible, such as gain knowledge, would you mind updating your blog with additional information? It is very useful for me. dark web links
ReplyDeleteReally I enjoy your site with effective and useful information. It is included very nice post with a lot of our resources.thanks for share. i enjoy this post. hydra onion
ReplyDeleteThanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with extra information? It is extremely helpful for me. гидра тор
ReplyDeletePositive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include. dark web links
ReplyDeleteThis is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free. hydra onion
ReplyDeleteI was reading some of your content on this website and I conceive this internet site is really informative ! Keep on putting up. гидра онион
ReplyDeleteReally a great addition. I have read this marvelous post. Thanks for sharing information about it. I really like that. Thanks so lot for your convene. dark web links
ReplyDelete