بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
ANIMASI berupa partikel tampil di background blog. Bagaimana tuh caranya? apakah disulap oleh pesulap merah? oh bukan, tentu saja bukan. Apakah dengan mantera-mantera tertentu supaya tampil mengesankan? tentu saja juga bukan, bukan dengan cara yang disebutkan barusan. Lhah Bagaimana Cara Menampilkan Ikon Partikel Animasi pada Background Template Blog..
Nah kali ini kita akan membahas tentang hal yang satu ini. Eh tapi omong-omong, udah lama ya sekitar 3 bulanan saya tidak update artikel tutorial ngeblog yang mengasyikkan hehe. Maaf, maaf ya teman-teman. Itu semua terjadi karena saya masih ada kesibukan lain yang tidak kalah penting daripada membagikan ilmu kepada kalian semua para blogger yang budiman dan dirahmati Allah SWT. Hem masih sering mampir kesini ya kemaren-kemaren? oke deh nggak papa, sekarang, hari ini, malam ini kita akan utak-atik blog lagi supaya tampilannya makin yahud.
Tampilan background blog yang semula biasa saja akan kita ubah menjadi bentuk partikel animasi yang menakjubkan dengan CSS3. Ya lagi-lagi dengan CSS3. Apa sih kehebatan CSS3. Kalian bisa baca artikel ini deh kalau masih ragu kehebatan CSS3. Ini nih artikelnya Kehebatan CSS3. Bagaimana sudah baca artikelnya? oke lanjut lagi ya teman-teman.
Tapi kali ini kita menggunakan element SCSS. Terus apa sih SCSS. SCSS atau Sassy CSS adalah sintaks terbaru dari SASS (Syntactically Awesome Style Sheets). SASS sendiri merupakan sebuah preprocessor dari CSS, yakni sebuah program untuk mengolah data yang menggunakan syntax tertentu dengan outputnya adalah CSS.
SCSS sudah banyak yang menggunakannya dikarenakan memiliki aturan penulisan yang lebih ramah bagi developer sebuah website. Selain itu, banyaknya fitur yang ditawarkan menjadikan kegiatan coding menjadi lebih efisien. Jadi, kalian tidak perlu berulang kali menulis kode yang sama seperti ketika coding menggunakan element CSS. Sekilas agak rumit ya membayangkannya :D.
Baca Juga :
Membuat Model Partikel Animasi pada Background Blog
1. Kalian masuk ke Dashboard Blogger2. Klik Tema
3. Klik lagi Sesuaikan : Edit HTML
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas persis dari kode tersebut.
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.glowing {
position: relative;
min-width: 700px;
height: 550px;
margin: -150px;
transform-origin: right;
animation: colorChange 5s linear infinite;
}
.glowing:nth-child(even) {
transform-origin: left;
}
@keyframes colorChange {
0% {
filter: hue-rotate(0deg);
transform: rotate(0deg);
}
100% {
filter: hue-rotate(360deg);
transform: rotate(360deg);
}
}
.glowing span {
position: absolute;
top: calc(80px * var(--i));
left: calc(80px * var(--i));
bottom: calc(80px * var(--i));
right: calc(80px * var(--i));
}
.glowing span::before {
content: "";
position: absolute;
top: 50%;
left: -8px;
width: 15px;
height: 15px;
background: #f00;
border-radius: 50%;
}
.glowing span:nth-child(3n + 1)::before {
background: rgba(134,255,0,1);
box-shadow: 0 0 20px rgba(134,255,0,1),
0 0 40px rgba(134,255,0,1),
0 0 60px rgba(134,255,0,1),
0 0 80px rgba(134,255,0,1),
0 0 0 8px rgba(134,255,0,.1);
}
.glowing span:nth-child(3n + 2)::before {
background: rgba(255,214,0,1);
box-shadow: 0 0 20px rgba(255,214,0,1),
0 0 40px rgba(255,214,0,1),
0 0 60px rgba(255,214,0,1),
0 0 80px rgba(255,214,0,1),
0 0 0 8px rgba(255,214,0,.1);
}
.glowing span:nth-child(3n + 3)::before {
background: rgba(0,226,255,1);
box-shadow: 0 0 20px rgba(0,226,255,1),
0 0 40px rgba(0,226,255,1),
0 0 60px rgba(0,226,255,1),
0 0 80px rgba(0,226,255,1),
0 0 0 8px rgba(0,226,255,.1);
}
.glowing span:nth-child(3n + 1) {
animation: animate 10s alternate infinite;
}
.glowing span:nth-child(3n + 2) {
animation: animate-reverse 3s alternate infinite;
}
.glowing span:nth-child(3n + 3) {
animation: animate 8s alternate infinite;
}
@keyframes animate {
0% {
transform: rotate(180deg);
}
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes animate-reverse {
0% {
transform: rotate(360deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(0deg);
}
}Selanjutnya :
5. Masuk ke Tata Letak blog dan tempelkan kode dibawah ini di dalamnya kemudian simpan dan publikasikan. Simpan di lemari atau di dompet kalian ya. Eh salah, simpan di blog kalian to ya. :D. Seperti ini kodenya.
<body>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
<div class="glowing">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
</div>
</body>Untuk hasil akhirnya akan saya tampilkan pada demo dibawah ini. Klik aja tombol dibawah.
Bagaimana sudah diklik dan dilihat khan? Sekarang kalian coba praktekkan saja di blog kalian. Tapi jangan lupa back up template kalian ya. Cara Back Template sudah saya berikan tutorialnya. Ingat kata-kata ini ya teman-teman. "Sukses tidak datang dari kapasitas fisik. Tapi datang dari kemauan yang gigih dan kemauan yang keras serta tekad yang bulat." – Mahatma Gandhi. Awesome nian kata-kata bijak ini. Sekian tutorial kali ini. Selamat ngeblog lagi. Wassalam.
