Tạo hiệu ứng hover xoay ảnh với Css3

đăng ngày: 28-08-2018 lúc 10:56

1261 lượt xem 7 lượt tải

Mô tả chi tiết

Css3 đã cho phép chúng ta tiến xa hơn rất nhiều trong thiết kế web. Nếu như ngày trước,muốn thực hiện một hiệu ứng ảnh động chúng ta bắt buộc phải sử dụng đến ảnh .Gif hoặc Flash thì ngay nay vấn đề đó đơn giản hơn rất nhiều.Trong bài viết này mình xin hướng dẫn các bạn cách tạo hiệu hứng hover xoay và biến đổi hình dáng ảnh rất đẹp,rất mượt mà với Css3,bài hướng dẫn rất đơn giản nhưng hiệu quả của nó thì không hề đơn giản.

Đầu tiên là xây dựng khung Html,các bạn sử dụng đoạn code dưới :

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Hiệu ứng hover thay đổi hình dang</title>
</head>
<body>
    
        
    
</body>
</html>

Đoạn html của chúng ta chỉ đơn giản như vậy thôi,chúng ta bắt tay vào xây dựng Css,các bạn định dạng cho ảnh như sau :

.center {
 
width: 200px;
height: 200px;
margin: 80px auto;
}
.center img {
 width: 200px;
 height: 200px;
}

Bản chất của tấm ảnh của chúng ta là hình vuông,chúng ta sẽ tạo hiệu ứng biến đổi tấm ảnh này thành hình tròn khi rê chuột qua bằng cách thêm vào đoạn css sau :

.center img:hover {
 border-radius: 50%;
}

Thuộc tính border-radius: 50% sẽ biến đổi tấm ảnh từ hình vuông thành hình tròn,đến đây khi rê chuột các bạn đã có thể thấy hiệu ứng nhưng nó diễn ra ngay tức thì nên không được đẹp mắt,các bạn thêm đoạn css transition vào để tạo hiệu ứng chuyển động khi rê chuột qua ảnh.Bây giờ đoạn Css của chúng ta sẽ như sau :

.center {
width: 200px;
height: 200px;
margin: 80px auto;
}
.center img {
width: 200px;
height: 200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.center img:hover {
     border-radius: 50%;
}

Okay,khi hoàn thành đoạn code rê chuột qua tấm ảnh các bạn có thể thấy tấm ảnh từ từ biến đổi từ vuông thành tròn,tuy nhiên,để đẹp mặt hơn,chúng ta có thể thêm hiệu ứng xoay 1 vòng cho ảnh,và dưới đây là đoạn css hoàn thành :

.center {
 
width: 200px;
height: 200px;
margin: 80px auto;
}
.center img {
    width: 200px;
    height: 200px;
    -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
     transition: all 0.5s ease;
}
.center img:hover {
     border-radius: 50%;
     -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
}

Hy vọng với bài này sẽ giúp ích được cho mấy bạn đang nghiên cứu về CSS3. Chúc mấy bạn may mắn và thành công !!