Hello sobat ICloudzer kali ini admin bakalan memberikan informasi seputar dunia blogging dan blogger, yakni bagaimana sih caranya membuat animasi CSS waterBob diblogge
Info: Baiklah sobat ICloudzer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Animation WaterBob
WaterBob merupakan nama dari tampilan animasi CSS, yang mana Animasi CSS tersebut bisa digunakan pada seluruh jenis platform yang mendukung CSS dan HTML, seperti blogger dan sejenisnya okay
Fungsi Animation
Setiap kali admin menerangkan animation CSS dalam sebuah artikel, admin tidak lupa lupanya memberitahukan akan setiap fungsi dari animation CSS tersebut
Meskipun dalam penjelasan fungsi dari penggunaan animation CSS selalu sama maknanya namun hal tersebut penting sebagai wawasan dan ilmu, jadi Fungsi dari animation CSS bisa digunakan untuk loading page ataupun hal yang lainnya untuk ditampilkan pada laman page website
Dibuat Menggunakan CSS
Hampir seluruh element animation CSS tersebut dibuat menggunakan kode CSS, seperti namanya yaitu animation CSS in blogger
Jangan heran tampilan animasi tersebut benar benar responsif dan ringat ketika digunakan atau ketika ditampilkan
Contoh Tampilan
Sebagi pelengkap didalam pembahasan kita kali ini, maka admin juga telah menyediakan contoh tampilan dari animation CSS tersebut, kamu bisa menggunakan tombol dibawah ini untuk langsung melihatnya
Cara pembuatan
Baiklah sekarang saatnya admin bakalan memberikan informasi mengenai cara membuat animasi CSS waterBob diblogger mudah
Kode CSS
Baiklah sobat ICloudzer langkah pertama yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian kamu bisa meletakkan kode CSS tersebut tepat diatas kode ]]></b:skin>
.rahObs {
width: 280px;
height: 280px;
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
border-radius: 100%;
-webkit-animation: rahbelok linear 16s infinite;
-moz-animation: rahbelok linear 16s infinite;
&:after {
content: '';
height: 10px;
width: 10px;
border-radius: 50%;
background: #334455;
position: relative;
display: block;
}
&:before {
content: '';
height: 10px;
width: 10px;
border-radius: 50%;
background: #f80000;
position: absolute;
margin-top: -60px;
display: block;
-webkit-animation: rahOrbit linear 5s infinite;
-moz-animation: rahOrbit linear 5s infinite;
animation: rahOrbit linear 5s infinite;
}
}
.rahObo {
position: absolute;
background: #f80000;
}
.rahObo:nth-child(1) {
top: -10px;
left: -10px;
width: 250px;
height: 260px;
background: #f80000;
border-radius: 100%;
-webkit-animation: rahcoolweh linear 3s infinite;
-moz-animation: rahcoolweh linear 3s infinite;
animation: rahcoolweh linear 3s infinite;
}
.rahObo:nth-child(2) {
top: 10px;
left: 10px;
background: #f80000;
width: 250px;
height: 260px;
border-radius: 100%;
-webkit-animation: rahleftweh linear 3s infinite;
-moz-animation: rahleftweh linear 3s infinite;
animation: rahleftweh linear 3s infinite;
}
.rahObo:nth-child(3) {
top: 10px;
left: -10px;
background: #f80000;
width: 250px;
height: 260px;
border-radius: 100%;
-webkit-animation: rahrightweh linear 3s infinite;
-moz-animation: rahrightweh linear 3s infinite;
animation: rahrightweh linear 3s infinite;
}
@keyframes rahOrbit {
0% {
top: 10px;
opacity: 1;
transform: rotate(0deg) scale(1);
}
50% {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
top: -10px;
opacity: 0.3;
transform: rotate(180deg) scale(1.5);
}
100% {
top: 10px;
opacity: 1;
transform: rotate(350deg) scale(1);
}
}
@keyframes rahcoolweh {
0% {
top: 0px;
transform: rotate(0deg) scale(1);
}
50% {
top: 10px;
transform: rotate(180deg) scale(1.04);
}
100% {
top: 0px;
transform: rotate(350deg) scale(1);
}
}
@keyframes rahleftweh {
0% {
top: 0px;
transform: rotate(0deg) scale(1.05);
}
50% {
top: 10px;
transform: rotate(180deg) scale(1);
}
100% {
top: 0px;
transform: rotate(350deg) scale(1.05);
}
}
@keyframes rahrightweh {
0% {
top: -10px;
transform: rotate(0deg) scale(1);
}
50% {
top: 0px;
transform: rotate(180deg) scale(1.02);
}
100% {
top: -10px;
transform: rotate(350deg) scale();
}
}
@-webkit-keyframes rahbelok {
0% {
-webkit-transform: rotate(0deg) skewX(0deg);
}
100% {
-webkit-transform: rotate(-350deg) skewX(0deg);
}
}Info: Atau kamu juga bisa menggunakan tag kode <style>
Kode HTML
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin lagi kode HTML dibawah ini kemudian gunakan sesuai keperluan kamu aja okay
<div class="rahObs">
<div class="rahObo"></div>
<div class="rahObo"></div>
<div class="rahObo"></div>
</div>Info: Fungsi dari kode html diatas adalah untuk menampilkan fungsi animation CSS tersebut