Hướng dẫn CSS Hover Effects cho một khối DIV lung linh

Hello lại là mình Thịnh DEV đây, chúc anh em buổi tối vui vẻ, Nhiều khi anh em lướt web thấy có các hover ở chữ hoặc một box content nào đó rất đẹp như kiểu ảnh dưới đây

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 😀

Đầ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

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *