css3 bag2 animasi tossing
Animasi menggunakan css3. Sebelumnya dibahas tentang css3 bag1 css3 Pulse, kali ini mengulas tentang css3 tossing. berikut adalah css3 yang akan kita gunakan.
/* Css3 tossing */
.tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } }
letakkan kode css3 sebelum tag ]]< /b:skin>
dan atau bisa juga menggunakan style type. Untuk object animasi masih menggunakan object img src berikut
< a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" > < img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" / > < /a>
apit img src menggunakan div
< div class='tossing' >
TARUH OBJECT DISINI
< /div >
sehingga menjadi
<div class='tossing'> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" > < img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglDw16vMd0s6feo3gtQ5F1sLE2d_csqx9w6jeH_vMedwq73gkhRC-U25CEkW6ZYoMEXid8pf8xbmsdTgsxvEgpE4PNG4KWob260Ab1tT7U5k4aDYv_qjRMs6EjRYCTrytAZj-6mMWZqX4/s1600/twitter-icon.png" / > </a > </div>
hasil dari menggunakan css3 seperti berikut
Salin kode disini
Tidak ada komentar:
Posting Komentar