Home
Contact Me
Kali ini saya akan sharing tentang Animasi CSS3 pada gambar. ini saya dapatkan dari hendro prayitno .
tetapi saya hanya sharing sedikit aja . langsung aja kita lihat Contohnya :
1. Image hover CSS3
Efek di bawah dapat berganti gambar apabila cursor di dekatkan.
height:300px; background:#000; color:#fff; text-align:center} #kodok-3{position:relative;}#kodok-3 img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}
Untuk membuatnya silahkan copy paste kode berikut :
<style type="text/css">.kodokloncat{float:center; margin:0px; autowidth:0px; autoheight:0px; autoborder:none; overflow:hidden}.details{width:200px; height:300px; background:#000; color:#fff; text-align:center} #kodok-3{position:relative;}#kodok-3 img{opacity:1-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details{position:absolute;top:0;left:0;opacity: 0;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}#kodok-3 .details:hover{opacity: .9;-webkit-transition: opacity;-webkit-transition-timing-function: ease-out;-webkit-transition-duration: 500ms;}</style><div class="kodokloncat" id="kodok-3">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg" /><div class="details"><img height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihmPL_9XzZgz0pNzjtT9Q8bBYQnVRK51mre-FzlON7u9_9ug6AdObQoztC9qRJIqjqpLoYQUYg77oF54w5JRn_oF-st3WpaGn6-ZX-nZ8z7mJrw7pKS9Abx-vGe69gkVUHQc9QyPHzEQ/s400/063.jpg" width="400" /></div></div>2.Memindahkan Gambar Dengan Efek Border Radius
Silahkan arahkan kursor ke gambar di bawah
Untuk membuatnya copy paste kode berikut :
<style type="text/css">#timings_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.abstrak_box{width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg)}#ease.abstrak_box{-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;}#timings_demo:hover .abstrak_box, #timings_demo.hover_effect .abstrak_box{margin-left:440px;-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background-color:#fff;</style><div id="timings_demo"><div class="abstrak_box" id="ease"><div class="center"></div></div></div>3.Membuat Gambar Menghilang
Silahkan arahkan kursor ke gambar dibawah ini :
untuk membuatnya silahkan copy paste kode berikut :
4.membuat gambar berjalan
Silahkan arahkan kursor ke gambar dibawah ini:
<style type="text/css">
#waktu_demo{margin:0 auto;border:0px #aaa solid;padding:10px;}.amdhas_box {width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg)}#ease.amdhas_box {
-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;
}#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box{margin-left:440px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";filter: alpha(opacity=6);-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);
transform: rotate(360deg);background-color:#fff;</style><div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>
#waktu_demo{margin:0 auto;border:0px #aaa solid;padding:10px;}.amdhas_box {width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg)}#ease.amdhas_box {
-webkit-transition: all 4s ease;-moz-transition: all 4s ease;-o-transition: all 4s ease;-webkit-transition: all 4s ease;transition: all 4s ease;border:1px #f00 solid;
}#waktu_demo:hover .amdhas_box, #waktu_demo.hover_effect .amdhas_box{margin-left:440px;opacity:0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=6)";filter: alpha(opacity=6);-webkit-border-radius:40px 40px;-moz-border-radius:40px 40px;-o-border-radius:25px;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);
transform: rotate(360deg);background-color:#fff;</style><div id="waktu_demo"><div class="amdhas_box" id="ease"><div class="center"></div></div></div>
4.membuat gambar berjalan
Silahkan arahkan kursor ke gambar dibawah ini:
untuk membuatnya silahkan copy paste kode berikut :
<style type="text/css">
#japra_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.feti_box {width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg)}#ease.feti_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;border:1px #f00 solid;}#japra_demo:hover .feti_box, #japra_demo.hover_effect .feti_box {margin-left:440px;-moz-transform:rotateY(180deg);-webkit-transform: rotateY(180deg);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;padding: 10px;color: white;text-align: center;background-color: #aaa;</style><div id="japra_demo"><div class="feti_box" id="ease"><div class="center"></div></div></div>
#japra_demo {margin:0 auto;border:0px #aaa solid;padding:10px;}.feti_box {width:280px;height:200px;margin-bottom:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWxCS7TDyADDbPh6jzgrUcf2dCpc_R9Exn_Hu_VvF-FNqqnDHMgKcwAIK819cCl3FwpwL9fuijgM_D-4oyWr4oWtnu1KBPOwMdYfnvXGtOmDtd0RNWx7Jy2e_lOFA2Zx6TjgTd7W3Vi4/s400/037.jpg)}#ease.feti_box {
-webkit-transition: all 4s ease-in;-moz-transition: all 4s ease-in;-o-transition: all 4s ease-in;-webkit-transition: all 4s ease-in;transition: all 4s ease-in;border:1px #f00 solid;}#japra_demo:hover .feti_box, #japra_demo.hover_effect .feti_box {margin-left:440px;-moz-transform:rotateY(180deg);-webkit-transform: rotateY(180deg);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;padding: 10px;color: white;text-align: center;background-color: #aaa;</style><div id="japra_demo"><div class="feti_box" id="ease"><div class="center"></div></div></div>
TERIMAKASIH
Thanks to : hendro-prayitno
Ini hanya sedikit dari contoh dari Animasi CSS3 pada gambar, kalo masih kurang silahkan sobat langsung ke sumbernya atau sobat bisa utak-atik kode'a sendiri.
sekian dulu sharing saya hari ini , semoga bermanfaat dan jangan lupa berkomentar.
Ini hanya sedikit dari contoh dari Animasi CSS3 pada gambar, kalo masih kurang silahkan sobat langsung ke sumbernya atau sobat bisa utak-atik kode'a sendiri.
sekian dulu sharing saya hari ini , semoga bermanfaat dan jangan lupa berkomentar.
Artikel Terkait:
Sebarkan Artikel ini :
0komentar:
Posting Komentar
thank to visit