Share code tạo ảnh xoay liên tục, ảnh xoay khi hover chuột, css cực đẹp

Share code xoay ảnh khi hover chuột , tạo ảnh xoay liên tục

Trong phần này chúng ta sẽ tạo hiệu ứng xoay ảnh khi hover chuột hoặc tạo ảnh xoay liên tục

Lưu ý: phần này chỉ dành cho máy tính và 1 số smartphone có hỗ trợ thôi nha!


Tạo ảnh xoay liên tục
HTml viết: <div class="ex"><img src="../images/anhthiennhien/images.jpg" alt="Thiên nhiên"/></div>
CSS viết: @-webkit-keyframes spaceboots { 0% { -webkit-transform: rotate(0deg); } 25% { -webkit-transform: rotate(90deg); } 50% { -webkit-transform: rotate(180deg); } 75% { -webkit-transform: rotate(270deg); } 100% { -webkit-transform: rotate(360deg); } } .ex img{ width: 100px; height: 100px; border-radius: 500px; -webkit-animation-name:spaceboots; -webkit-animation-duration:10s; -webkit-transform-origin:50% 50%; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } Tạo ảnh xoay khi hover chuột
HTML viết:
<div class="ex1" align="center"><img src="../images/anhthiennhien/images.jpg" alt="Thiên nhiên"/></div> CSS viết: .ex1 img{ width: 100px; height: auto; border-radius: 50px; margin-left:5%; margin-bottom:20px; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; transition: width 2s, height 2s, transform 2s; } .ex1 img:hover { -webkit-transform: rotate(360deg); /* Safari */ transform: rotate(360deg); box-shadow:3px 3px 4px #999; }

Chỉ cần sử dụng một số thuộc tính css là có thể tạo ra những hiệu ứng rất hay rồi !