Tạo một trái tim LTV đập bum ba là bum bằng CSS
"Mỗi năm hoa đào nở
Lại thấy anh code già
Ngâm nga và suy nghĩ
Làm gì Valentine?"
...
Vậy là một màu Valentine nữa lại về. Đâu chỉ những anh code có bồ, những anh code chưa có bồ hay đang tâm tư cờ rút cũng cứ gọi là đau đầu lắm chứ. Thiệp hoa quà bánh thì thường quá rồi, IT là vua của các nghề thì mình cũng phải có món quà thật là độc lạ chứ đúng không anh em?
Thế anh em mình làm gì? Để tôi gợi ý cho anh em:
Dùng CSS tạo một món quà thật iu <3
Tôi thực sự yêu thích CSS. CSS không phải là một ngôn ngữ phức tạp (nó thậm chí còn đách được coi là một ngôn ngữ lập trình). Nhưng với hình học, toán học và một số quy tắc CSS cơ bản, bạn có thể biến trình duyệt của mình thành một bức tranh sáng tạo và thú vị ra phết.
Ô cê con dê, giờ bắt đầu nhó. Thế làm sao để tạo ra một trái tym lập trình viên ngọt ngào hoàn hảo nồng cháy iu thương chỉ bằng hình học?
Một trái tym đẹp quá là đẹp từ 2 hình tròn và 1 hình vuông
Và chúng ta có thể vẽ trái tym LTV đó với một phần tử duy nhất, nhờ vào các phần tử giả ::after và ::before. Nói về phần tử giả, ::after là phần tử giả cho phép bạn chèn nội dung vào một trang từ CSS (mà không cần phải có trong HTML). ::before cũng thế, chỉ khác là nó chèn nội dung trước bất kỳ nội dung nào khác trong HTML thay vì sau.
Đối với cả hai phần tử giả, kết quả cuối cùng không thực sự nằm trong DOM, nhưng nó vẫn sẽ xuất hiện trên trang như thật lun.
Nào, giờ thì tạo trái tym LTV bằng CSS!
.heart {
background-color: red;
display: inline-block;
height: 50px;
margin: 0 10px;
position: relative;
top: 0;
transform: rotate(-45deg);
position: absolute;
left: 45%; top: 45%;
width: 50px;
}
.heart:before,
.heart:after {
content: "";
background-color: red;
border-radius: 50%;
height: 50px;
position: absolute;
width: 50px;
}
.heart:before {
top: -25px;
left: 0;
}
.heart:after {
left: 25px;
top: 0;
}
Bạn có thể thấy rằng tôi xác định hình vuông và vị trí của nó bằng cách sử dụng lớp ‘heart’ chính và hai hình tròn có các phần tử giả :: before và :: after. Các hình tròn thực ra chỉ là 2 hình vuông nữa có bán kính đường viền giảm đi một nửa.
Nhưng trái tym mà không đập chình chịch à nhầm bình bịch thì con gì là trái tym?
Hãy tạo ra một nhịp đập. Ở đây chúng ta sẽ sử dụng quy tắc @keyframes. Quy tắc tại CSS @keyframes được sử dụng để xác định hành vi của một chu kỳ của hoạt ảnh CSS.
Khi sử dụng quy tắc khung hình chính, chúng ta có thể chia khoảng thời gian thành các phần nhỏ hơn và tạo chuyển đổi / hoạt ảnh bằng cách chia nó thành các bước (mỗi bước tương ứng với phần trăm hoàn thành khoảng thời gian).
Nào giờ thì hãy tạo ra nhịp tim. Hoạt ảnh nhịp tim của tôi bao gồm 3 bước:
@keyframes heartbeat {
0% {
transform: scale( 1 );
}
20% {
transform: scale( 1.25 )
translateX(5%)
translateY(5%);
}
40% {
transform: scale( 1.5 )
translateX(9%)
translateY(10%);
}
}
- Vào 0% khoảng thời gian, tôi bắt đầu mà không có biến đổi gì với trái tym.
- Trong 20% khoảng thời gian, tôi chia tỷ lệ hình dạng của trái tym lên 125% so với kích thước ban đầu.
- Trong 40% khoảng thời gian, tôi chia tỷ lệ hình dạng của trái tym xuống 150% so với kích thước ban đầu.
60% khoảng thời gian còn lại chúng ta để thời gian cho trái tim trở lại trạng thái ban đầu.
Cuối cùng chúng ta phải gán hoạt ảnh cho trái tym LTV.
.heart {
animation: heartbeat 1s infinite; // our heart has infinite heartbeat :)
...
}
Xong con ong! Chúc anh em có một ngày Valentine vui vẻ :(((. Tôi tắt máy đi ngủ đây!
Chi tiết bài đăng anh em xem tại: Medium
