Được thực hiện bởi Daniel Eden. Giúp nâng cao việc sử dụng tài nguyên animation của CSS3. Bí quyết là thiết lập animation delay. Thiết lập các animation-fill-mode cũng rất quan trọng. Và đặc biệt là không sử dụng Javascrips.

Xem Demo

Cách làm:

Bắt đầu với HTML:
Tạo 6 thẻ tương đương với 6 dấu chấm (dots).

Code:

<span class="l-1"></span>

Việc sử dụng những các hình học cơ bản như hình vuông, hình chữ nhật hay hình tròn.. vào trong website không là gì xa lạ. Nhưng để tìm ra những phương pháp thiết kế web mới mẻ hơn, tránh đi sự nhàm chán trong hình ảnh hay bố cục, các nhà thiết kế web đã thử sử dụng hình thoi, tam giác hay đa giác.. để thổi hồn cho phong cách layout càng ấn tượng hơn, độc đáo hơn. Dưới đây là bộ sưu tập những mẫu website hình thoi mà 2Cwebvn muốn chia sẻ đến cho các bạn ngày hôm nay. Chúng mình sẽ tiếp tục gửi đến các bạn những mẫu web hình học khác qua những bài viết sau.