- vừa được xem lúc

Làm trái tim có "nhịp đập" bằng HTML và CSS

0 0 31

Người đăng: Long Hai

Theo Viblo Asia

Bài viết dưới đây của mình sẽ chia sẻ cách làm trái tim có "nhịp đập" bằng HTML và CSS. Mong rằng mọi người sẽ theo dõi hết bài viết này của mình.

1. Source code

Để làm một trái tim, cách làm của mình sẽ là tạo ra 2 hình elip, sau đó ghép lại với nhau.

Ở phần code HTML, mình sẽ tạo 1 div lớn có class là "heart", phía bên trong sẽ là 2 div nhỏ có class lần lượt là "left" và "right" - biểu thị cho hai hình elp phía bên trái và bên phải.

<div class="heart"> <div class="left"></div> // Hình Elip bên trái <div class="right"></div> // Hình Elip bên phải
</div>

Công việc bây giờ sẽ là biến 2 div con trên trở thành 2 hình elip. Mình bắt đầu xây dựng css của 2 div này

.heart div { background: red; width: 71px; height: 126px; top: 40px; display: block; position: absolute; border-radius: 50%
} .left { left: 45px;
} .right{ right: 45px;
}

Ta sẽ được 2 hình elip như hình dưới:

Việc tiếp theo phải làm là xoay lại 2 hình elip rồi ghép chúng vào với nhau để tạo thành một hình trái tim.

Mình sẽ sử dụng thuộc tính transform của css và viết thêm css của class .heart để làm điều này.

.heart { width: 200px; height: 200px; top: 50%; left: 50%; z-index: 1; display: block; position: absolute; transform: translate(-50%,-50%)
} .heart div { background: #ff0000; width: 71px; height: 126px; top: 40px; display: block; position: absolute; border-radius: 50%
} .left { left: 45px; transform: rotate(330deg);
} .right { right: 45px; transform: rotate(30deg);
}

Kết quả nhận được là:

Như vậy là xong hình trái tim. Bây giờ là làm "nhịp đập" cho nó 😃.

Để giúp cho trái tim này có "nhịp đập", mình sẽ sử dụng 2 thuộc tính của CSS là animation@keyframes.

CSS hoàn chỉnh sẽ là:

.heart { width: 200px; height: 200px; top: 50%; left: 50%; z-index: 1; display: block; position: absolute; transform: translate(-50%,-50%); animation: heart 1s ease infinite
} @keyframes heart { 96% { transform: translate(-50%,-50%) scale(.8,.8) } 100% { transform: translate(-50%,-50%) scale(1,1) }
} .heart div { background: #ff0000; width: 71px; height: 126px; top: 40px; display: block; position: absolute; border-radius: 50% } .left { left: 45px; transform: rotate(330deg);
} .right { right: 45px; transform: rotate(30deg);
} 

Sau khi hoàn tất phần này, thành quả của chúng ta có sẽ là một trái tim có "nhịp đập" đàng hoàng nhé 😃.

Đây chính là thành quả cuối cùng:

2. Lời kết

Vừa rồi mình đã hướng dẫn các bạn cách tạo một hình trái tim có "nhịp đập" bằng CSS và HTML. Mong rằng bài viết của mình sẽ giúp ích được cho các bạn trong quá trình sáng tạo sản phẩm hay với HTML và CSS.

Tham khảo: Animated Heart by Amli

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 510

- vừa được xem lúc

Cài đặt WSL / WSL2 trên Windows 10 để code như trên Ubuntu

Sau vài ba năm mình chuyển qua code trên Ubuntu thì thật không thể phủ nhận rằng mình đã yêu em nó. Cá nhân mình sử dụng Ubuntu để code web thì thật là tuyệt vời.

0 0 383

- vừa được xem lúc

Đặt tên commit message sao cho "tình nghĩa anh em chắc chắn bền lâu"????

. Lời mở đầu. .

1 1 715

- vừa được xem lúc

Tìm hiểu về Resource Controller trong Laravel

Giới thiệu. Trong laravel, việc sử dụng các route post, get, group để gọi đến 1 action của Controller đã là quá quen đối với các bạn sử dụng framework này.

0 0 343

- vừa được xem lúc

Phân quyền đơn giản với package Laravel permission

Như các bạn đã biết, phân quyền trong một ứng dụng là một phần không thể thiếu trong việc phát triển phần mềm, dù đó là ứng dụng web hay là mobile. Vậy nên, hôm nay mình sẽ giới thiệu một package có thể giúp các bạn phân quyền nhanh và đơn giản trong một website được viết bằng PHP với framework là L

0 0 432

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 423