Home » » Cara Membuat Animasi Iklan Menggunakan CSS3

Cara Membuat Animasi Iklan Menggunakan CSS3

Written By Nurul Watoni on Selasa, 25 Maret 2014 | 23.07

animasi, iklan, css3


Pengembangan CSS pada saat ini telah mencapai tahap yang ketiga, yaitu CSS3. Sejak dirilis beberapa tahun lalu, CSS3 telah mengalami beberapa kali revisi, yang menjadikan
CSS3 lebih simple, lebih responsive, dan tentunya lebih keren.

Pada kesempatan kali ini kita akan membuat gambar animasi untuk promosi iklan dengan menggunakan CSS3, mengapa harus CSS3? karena CSS3 memberikan hasil yang lebih baik daripada pengolah gambar konvesional seperti photoshop ataupun corel draw.
beberapa kelebihannya adalah sebagai berikut:
  1. gambar yang dihasilkan memiliki resolusi lebih besar.
  2. gambar tetap bagus jika gambarnya dibesarkan.
  3. lebih mudah untuk diedit.
  4. ukuran jauh lebih kecil.
  5. lebih responsive.
kelebihan lainnya adalah, karena sebagian besar dari kita adalah web developer, yang setiap harinya berkutat dengan kode, tentunya ini sangat menguntungkan, karena kita tidak perlu membuka photoshop ataupun adobe illustrator hanya untuk membuat animasi sederhana.
yang dibutuhkan hanya text editor seperti notepad ataupun notepad++.

tips yang digunakan pada kode berikut ini adalah, menganimasikan object div hingga tak terhingga. kode yang digunakan adalah @keyframes nama_animasi {from{kode_css}to{kode_css}} dan animation:nama_animasi waktu infinite;.
kode @keyframes nama_animasi {from{kode_css}to{kode_css}} berguna untuk merender sedangkan animation:nama_animasi waktu infinite; digunakan untuk mengeksekusi animasi yang telah dirender oleh @keyframes.

Berikut ini kode lengkapnya

iklan.html

<!DOCTYPE html>
<html>
    <head>
    <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        <header>
            <h1>Animasi Iklan Dengan CSS3</h1>
        </header>
<center>
<div id="iklan">
<div id="inner">
<span id="ads1" class="ads">Iklan Disini!<span><br/>
<span id="ads2" class="ads">400px * 400px</span><br/>
<span id="ads3" class="ads">Hanya $1000 per bulan</span><br/>
</span>
<div id="logo"></logo>
</div>
</div>
</center>
        <a href="#">
        <div id="kembali">
        <div id="icon"><</div>
        </div>
        </a>
    </body>
</html>


style.css

* {
margin:0;
padding:0;
}

body {
background:#f0fff0;
}

header {
height:60px;
background:#2f4f4f;
color:white;
}

header h1 {
text-align:center;
padding-top:5px;
}

#kembali {
width:60px;
height:60px;
position:fixed;
right:10px;
bottom:10px;
border-radius:30px;
background:#2f4f4f;
}

#kembali:hover {
background:#7cfc00;
}

#kembali:hover #icon{
color:#4b0082;
}

#icon {
color:#7cfc00;
font-size:50px;
margin-left:10px;
}

@keyframes latar {
0% {background:red;}
33% {background:yellow;}
66% {background:green;}
99% {background:red;}
}

@-webkit-keyframes latar {
0% {background:red;}
33% {background:yellow;}
66% {background:green;}
99% {background:red;}
}

#iklan {
width:300px;
height:300px;
border:1px solid black;
border-radius:5px;
background:red;
margin-top:130px;
animation:latar 5s infinite;
-webkit-animation:latar 5s infinite;
}

#inner {
margin-top:100px;
}

.ads {
font-size:24px;
font-weight:bold;
}

@-webkit-keyframes iklan {
0%{color:black;}
50%{color:white;}
100%{color:black;}
}

@keyframes iklan {
0%{color:black;}
50%{color:white;}
100%{color:black;}
}

span#ads1{
color:black;
animation:iklan 1s infinite;
-webkit-animation:iklan 1s infinite;
}

@-webkit-keyframes logo {
0%{background:#8B008B;transform:translate(-50px);}
50%{background:white;transform:translate(0px);}
100%{background:#8B008B;transform:translate(50px);}
}

@keyframes logo {
0%{background:#8B008B;transform:translate(-50px);}
50%{background:white;transform:translate(0px);}
100%{background:#8B008B;transform:translate(50px);}
}

#logo {
width:40px;
height:40px;
background:#8B008B;
border-radius:5px;
margin-top:20px;
animation:logo 1s infinite;
-webkit-animation:logo 1s infinite;
}


Semoga postingan Cara Membuat Animasi Iklan ini bermanfaat, dan terima kasih atas kunjungannya.

0 komentar:

Posting Komentar