Và anh em nghĩ rằng là code nó rất khó đúng không ? :D, dạng hover css vậy không hề khó, các bạn chỉ cần biết chút html, css3 thôi. Để em hiểu mình sẽ chia sẻ cách CSS Hover Effects cho một box DIV như trên nhé.
Nào chúng ta cùng bắt đầu thôi :D
Đầu tiên anh em hãy khai báo HTML như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Hover Effects</title>
</head>
<body>
<div class="hove-box">
<p>Nội dung chúng ta cần điền tại đây, để làm demo chúc các bạn học tốt front-end có nhiều ý tưởng thiết kế web tuyệt vời hơn nữa, quan trọng là kếm được nhiều tiền. Trong lập trình có nhiều cái hay lắm</p>
</div>
</body>
</html>
Và chúng ta bắt đầu CSS cho nó như sau:
body
{
margin: 0;
padding: 0;
}
.hove-box
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
border-radius: 50%;
box-shadow: 0 0 0 15px #f40367;
background: #fff;
box-sizing: border-box;
text-align: center;
transition: .5s;
}
.hove-box:hover
{
border-radius: 0;
}
.hove-box:before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f40367;
z-index: -1;
transform: rotate(-45deg);
border-radius: 10px;
}
.hove-box p
{
margin: 0;
padding: 0;
color: #fff;
font-size: 16px;
padding: 20px;
font-family: sans-serif;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: .5s;
}
.hove-box:hover p
{
box-shadow: 0 0 50px rgba(0,0,0,.5);
}
Chỉ cần đoạn css đơn giản trên các bạn có thể tạo ra những Hover Effects để tô điểm trên trang web của mình rồi đó, các bạn có thể tùy biến mã css trên theo ý mình để có nhiều hiệu ứng đẹp
Điểm 4.6/5 dựa vào 87 đánh giá