PC Gaming
Laptop
Laptop Gaming
Bộ nhớ lưu trữ
Linh kiện PC
Màn hình máy tính
Bàn phím
Chuột – Lót chuột
Tai nghe – Loa – Micro
Ghế – Bàn
Phụ kiện
Mạng – Camera
Thiết bị văn phòngBài này mình sẽ hướng dẫn cách tạo một hình nằm dưới một hình khác, và xoay tròn khi di chuột lên.
– Đầu tiên chúng ta có file HTML như thế này. Có thẻ div là “hieuung”, có 2 the hình là “xoay” và “dungim”. Hình “xoay” viết hiển thị trước nên nó sẽ nằm dưới hình “dungim”
– Link file HTML này tới file hieuung.css.
[html] <!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="hieuung.css">
</head>
<body>
<div class="hieuung">
<img src="hinhxoay.png" alt="" class="xoay">
<img src="hinhdungim.png" alt="" class="dungim">
</div>
</body>
</html>
[/html]
Trong file hieuung.css, bạn làm như sau:
– Đầu tiên là chia lớp (layer cho nó: Ở class hieuung (class cha), mình đặt thuộc tính position và gán giá trị là relative. Sau đó ở 2 class “xoay” và “dungim” (class con), mình đặt thuộc tính position, gán giá trị là absolute và đặt top, left cho nó.
– Tiếp theo là đặt kích thước, vì mình muốn 2 hình này bằng nhau và nằm chồng lên nhau, nên mình đặt kích thước giống nhau. Là hình vuông nên chiều rộng và cao bằng nhau luôn.
– Bây giờ tạo hiệu ứng xoay: Bạn gọi class “.hieuung:hover .xoay” (nghĩa là: khi di chuột lên “hieuung” thì tác động lên “xoay”). Trong đó bạn đặt thuộc tính transform, gán giá trị là rotate, gán độ xoay trong () với giá trị là deg (viết tắt của degree, nghĩa là độ). Ở đây mình muốn xoay vòng tròn nên để là 360deg.
[css] .hieuung{position: relative;
}
.hieuung .xoay{
width:450px;
height:450px;
position: absolute;
top:0; left:0;
transition: 0.4s;
}
.hieuung:hover .xoay{
transform: rotate(360deg);
}
.hieuung .dungim{
width:450px;
height:450px;
position: absolute;
top:0; left:0;
}
[/css]
– Để nó xoay chậm lại thì ở class “.hieuung .xoay” bạn thêm thuộc tính transition và gán trị thấp xuống, càng thấp thì xoay càng chậm. Ở đây mình gán là 0.4s (0.4 giây).
– Bạn thể thêm X ngay phía sau rotate để nó xoay theo chiều ngang (rotateX), hoặc Y để nó xoay theo chiều dọc (rotateY), nếu không để gì thì nó xoay phẳng (Z).
Mình muốn nó tự xoay không dừng lại thì phải làm sao ạ.
Mình muốn nó tự xoay không dừng lại thì phải làm sao ạ.