Thủ thuật blogspot - Dautoblog

Hiệu ứng xoay tròn cho ảnh

Hiệu ứng này trông cũng khá đẹp mắt có thể áp dụng cho ảnh thumbnail trong các tiện ích như bài viết gần đây,bài viết ngẫu nhiên...
Hiệu ứng này có hai code

Minh họa



Dạng 1
CSS
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } 
HTML
<div id="social">
<img src="Link Hình Ảnh" /></div>
Dạng 2
CSS
.dauto {
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}

.dauto:hover {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
HTML
<img class="dauto" src="Link hình Ảnh"/>
Comments blogger

Không có nhận xét nào :