Sau một khoảng thời gian dài không đụng vào HTML, CSS, tôi quyết định quay lại nghịch ngợm mấy thứ hay ho này. Một buổi chiều rảnh rỗi và đây là hiệu ứng khá thú vị tôi làm được khi “nghịch” HTML, CSS (Do gif bị nén dung lượng khá nhiều nên trông như vậy, các bạn có thể xem preview ở video phía dưới).
Được rồi, không lòng vòng nữa. Dưới đây sẽ là code của hai file HTML và CSS.
1. Mã nguồn:
Code trong file HTML:
<!DOCTYPE html>
<html>
<head>
<title>Trái tim</title>
<link rel = "stylesheet" type="text/css" href="heart.css">
</head>
<body>
<div class="heart"></div>
</body>
</html>Code trong file CSS (lưu ý là các bạn phải đặt đúng tên file là heart.css nhé!):
body{
background-color: #fec5e5;
display: flex;
justify-content: center;
align-items: flex-end;
height: 100vh;
}
@keyframes beat {
0% {
transform: scale(1)
translateY(100px);
}
50% {
transform: scale(1.5)
translateY(-400px);
}
100%{
transform: scale(1)
translateY(100px);
}
}
.heart {
position: relative;
width: 125px;
height: 90px;
animation: beat 8s infinite;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 80px;
top: 0;
width: 80px;
height: 125px;
background-color: red;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}2. Tinh chỉnh code:
a) Đổi màu của trái tim:
Để có thể chỉnh được màu sắc của trái tim, các bạn chỉnh ở dòng:
background-color: red;Ví dụ bạn muốn chuyển thành màu xanh:
background-color: blue;b) Đổi kích thước của trái tim:
Hình ảnh của trái tim được tạo ra bởi phần tử con và được chứa trong 1 phần tử cha (trong suốt). Để chỉnh kích thước của trái tim thì các bạn chỉnh ở cả phần tử con lẫn phần tử cha, những dòng sau sẽ là những dòng lệnh các bạn cần chỉnh:
.heart {
position: relative;
width: 125px; // dòng này chỉnh độ rộng phần tử cha
height: 90px; // dòng này chỉnh chiều cao của phần tử cha
animation: beat 8s infinite;
} .heart:before,
.heart:after {
position: absolute;
content: "";
left: 80px; // bạn có thể điều chỉnh thêm dòng này để giúp trái tim ở vị trí cân đối
top: 0;
width: 80px; //chiều rộng phần tử con
height: 125px; // chiều cao phần tử con
background-color: red;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}c) Thay đổi tốc độ của hiệu ứng:
Bạn điều chỉnh thông số giây ở dòng animation (nhanh hơn thì giảm, chậm hơn thì tăng):
animation: beat 8s infinite;Ví dụ bạn muốn chỉnh tốc độ hiệu ứng nhanh hơn 2s thì dòng lệnh sẽ như sau
animation: beat 6s infinite;Hi vọng rằng, bài viết này có thể cung cấp cho bạn thêm kiến thức hữu ích về HTML, CSS.
Hẹn gặp lại!
Lanus Coder 