Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tutorial bagaimana Cara Membuat Animasi Pada Logo Menggunakan CSS.
Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi pada logo website teman-teman. Di sini saya menggunakan css untuk memberi animasi pada logonya.
Ok, langsung saja saya kasih tau Cara Membuat Animasi Pada Logo Menggunakan CSS.
– Pertama ketikan codingan di bawah ini:
<!DOCTYPE html> <html> <head> <title>Aniamation Logo</title> </head> <body> <div><span>Dumet School</span></div> <span id="gd"></span> </body> </html>
– Kedua ketikan codingan css berikut ini:
body {
background-color: #fff;/**Memberikan warna pada background**/
}
/**Memberikan style pada tag div**/
div {
width: 400px;
height: 100px;
background-color: #25b8c3;
color: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px;
/**Memberikan animasi pada tag div**/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: myanim 10s linear infinite;
-moz-animation: myanim 10s linear infinite;
-o-animation: myanim 10s linear infinite;
-ms-animation: myanim 10s linear infinite;
animation: myanim 10s linear infinite;
z-index: 2;
}
/**Memberikan style pada tag span yang ada di dalam div**/
div span {
display: block;
line-height: 100px;
font-family: Arial, sans-serif;
font-size: 45px;
font-weight: bold;
}
/**Memberikan style pada tag span yang ber id=gd**/
#gd {
width: 400px;
height: 100px;
background-color: #000;
color: #fff;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -50px; z-index: 1;}
/**Memberikan animasi supaya dapat berjalan di beberapa broser**/
@-moz-keyframes myanim {
0% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
25% {
-webkit-transform: perspective(300px) rotateY(70deg);
-moz-transform: perspective(300px) rotateY(70deg);
-o-transform: perspective(300px) rotateY(70deg);
-ms-transform: perspective(300px) rotateY(70deg);
transform: perspective(300px) rotateY(70deg);
}
50% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
75% {
-webkit-transform: perspective(300px) rotateY(-70deg);
-moz-transform: perspective(300px) rotateY(-70deg);
-o-transform: perspective(300px) rotateY(-70deg);
-ms-transform: perspective(300px) rotateY(-70deg);
transform: perspective(300px) rotateY(-70deg);
}
100% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
}
@-webkit-keyframes myanim {
0% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
25% {
-webkit-transform: perspective(300px) rotateY(70deg);
-moz-transform: perspective(300px) rotateY(70deg);
-o-transform: perspective(300px) rotateY(70deg);
-ms-transform: perspective(300px) rotateY(70deg);
transform: perspective(300px) rotateY(70deg);
}
50% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
75% {
-webkit-transform: perspective(300px) rotateY(-70deg);
-moz-transform: perspective(300px) rotateY(-70deg);
-o-transform: perspective(300px) rotateY(-70deg);
-ms-transform: perspective(300px) rotateY(-70deg);
transform: perspective(300px) rotateY(-70deg);
}
100% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
}
@-o-keyframes myanim {
0% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
25% {
-webkit-transform: perspective(300px) rotateY(70deg);
-moz-transform: perspective(300px) rotateY(70deg);
-o-transform: perspective(300px) rotateY(70deg);
-ms-transform: perspective(300px) rotateY(70deg);
transform: perspective(300px) rotateY(70deg);
}
50% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
75% {
-webkit-transform: perspective(300px) rotateY(-70deg);
-moz-transform: perspective(300px) rotateY(-70deg);
-o-transform: perspective(300px) rotateY(-70deg);
-ms-transform: perspective(300px) rotateY(-70deg);
transform: perspective(300px) rotateY(-70deg);
}
100% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
}
@keyframes myanim {
0% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
25% {
-webkit-transform: perspective(300px) rotateY(70deg);
-moz-transform: perspective(300px) rotateY(70deg);
-o-transform: perspective(300px) rotateY(70deg);
-ms-transform: perspective(300px) rotateY(70deg);
transform: perspective(300px) rotateY(70deg);
}
50% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
75% {
-webkit-transform: perspective(300px) rotateY(-70deg);
-moz-transform: perspective(300px) rotateY(-70deg);
-o-transform: perspective(300px) rotateY(-70deg);
-ms-transform: perspective(300px) rotateY(-70deg);
transform: perspective(300px) rotateY(-70deg);
}
100% {
-webkit-transform: perspective(300px) rotateY(0deg);
-moz-transform: perspective(300px) rotateY(0deg);
-o-transform: perspective(300px) rotateY(0deg);
-ms-transform: perspective(300px) rotateY(0deg);
transform: perspective(300px) rotateY(0deg);
}
}
untuk penjelasan css-nya saya telah beri commenting pada kode css-nya agar membantu teman-teman mengetahui fungsi dari bagian css-nya.
– Ketiga ketikan tag <link> pada file html-nya untuk mengkoneksikan cssnya,
<link rel="stylesheet" type="text/css" href="style.css">
Ok, sekarang kita lihat hasilnya yah teman-teman:
Nah efek yang kita berikan tadi akan menggerakan tag div ke kiri dan ke kanan pada logo.
Sekian tutorial dari saya kali ini tentang Cara Membuat Animasi Pada Logo Menggunakan CSS.
Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.