Bộ sưu tập các ví dụ mã nền hoạt hình HTML và CSS miễn phí được chọn thủ công từ Codepen, Github và các tài nguyên khác. Cập nhật bộ sưu tập tháng 4 năm 2021. 9 mặt hàng mới
Những bài viết liên quan
- Hiệu ứng nền JavaScript
- Plugin nền jQuery
Tác giả
- Temani Afif
- Ngày 13 tháng 8 năm 2022
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS
Về một mã
Hoạt ảnh mô hình chỉ CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Bárbara Rodríguez
- Ngày 25 tháng 7 năm 2022
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS
Về một mã
Nền Gradient với Sóng
Nền dốc với một số sóng ở cuối trang. Nếu bạn muốn có một nền khác cho trang web hoặc ứng dụng của mình thì đây là một cách đơn giản
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Wil van der Tuin
- Ngày 11 tháng 6 năm 2022
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS [SCSS]
Về một mã
Chuyển màu hoạt hình mờ
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Diyorbek Olimov
- Ngày 21 tháng 8 năm 2021
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS
Về một mã
Hoạt Hình Nền Bong Bóng
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Temani Afif
- Ngày 19 tháng 7 năm 2021
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS
Về một mã
Nền hình lục giác với 0 HTML
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Ryan Mulligan
- 6 Tháng mười một, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Ảnh động gradient tuyến tính CSS
Hoạt hình một chồng gradient tuyến tính
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Alison Quaglia
- 19 Tháng Bảy, 2020
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS [SCSS]
Về một mã
quả cầu màu nổi
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- bảng chữ cái
- 23 Tháng Sáu, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về một mã
Sao băng
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- bảng chữ cái
- 16 Tháng Sáu, 2020
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về một mã
bong bóng nổi
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Casthra Demosthene
- ngày 2 tháng 10 năm 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Hoạt hình CSS lá rơi
Lá rơi tháng 10 Hoạt ảnh CSS CSS không có JavaScript
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Mathieu S
- 27 Tháng Chín, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
tiếng ồn nền
CSS chỉ hoạt hình nền tiếng ồn tĩnh
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Adam Abundis
- 27 Tháng Chín, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về một mã
Hoạt hình mô hình [Vô hạn]
Đã sử dụng Flexbox để căn giữa văn bản theo chiều dọc và chiều ngang. Đã sử dụng keyframes
để đặt cuộn vô hạn
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Yusuke Nakaya
- 17 Tháng Năm, 2019
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [SCSS]
Về một mã
Chỉ CSS. Cảnh báo
nền sọc
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Igor Milenkovic
- 15 Tháng hai, 2019
liên kết
- bản demo và mã
Làm với
- HTML/CSS [Ít hơn]
Về một mã
Nền Núi Mát Mẻ
Nền núi mát mẻ với hình ảnh động - hơi phản hồi
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Vaibhav Arora
- Tháng Giêng 1, 2019
liên kết
- bản demo và mã
Làm với
- HTML [Haml] / CSS
Về mã
Nền Gợn Sóng Hoạt Hình
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Rob DiMarzo
- 16 Tháng Mười Hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [SCSS]
Về mã
Hợp nhất tam giác SVG vô hạn
Tam giác được tạo ra. Tam giác bị phá hủy
Vân vân và vân vân. Tôi đang tạo 60 SVG, mỗi SVG chứa 4 hình tam giác [đa giác]. Mỗi đa giác lặp qua một màu và hoạt hình ra bên ngoài từ điểm trung tâm của SVG gốc của nó cứ sau 1 giây. Toàn bộ hoạt ảnh lặp lại vô hạn cứ sau 4 giây
Mỗidiv
có mộtclip-path
để tạo mặt nạ lục giác. Khi các hình lục giác được ghép lại với nhau, các hình tam giác mở rộng chảy đều vào các hình tam giác của các hình lục giác liền kề cho đến khi chúng biến mất
Tôi đã sử dụng CSS Grid làm điểm bắt đầu, nhưng tôi vẫn còn lại một loạt các hình lục giác đẹp mắt với khoảng trống ở giữa. Để "kết nối" các hình lục giác, tôi xác địnhnth-children
tương ứng với một hàng và di chuyển chúng lên trên quatransform: translate;
Trình duyệt tương thích. Chrome, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Ksenia Kondrashova
- Ngày 12 tháng 12 năm 2018
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS
Về một mã
2kb Tổng kích thước Hoạt hình SVG
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Chris Neale
- 9 Tháng Mười Hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]/JavaScript [Babel]
Về mã
Gradient hình ảnh mặt nạ CSS hoạt hình
Trình duyệt tương thích. Chrome, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Mike Golus
- 6 Tháng Mười Hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [Sass]
Về mã
Đom đóm CSS
Một giải pháp chỉ dành cho HTML/CSS tao nhã để thêm hiệu ứng đom đóm tĩnh lặng vào trang của bạn
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Takeshi Kano
- 21 Tháng Chín, 2018
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [SCSS]
Về một mã
Hoạt hình hạt CSS thuần túy
Hoạt hình hạt CSS không có JavaScript. Điểm quan trọng nhất là chuyển động ngẫu nhiên của các hạt. Họa tiết được tạo bởi thuộc tính mask-image
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Đáp ứng. có
Phụ thuộc. -
Tác giả
- Anastasia Goodwin
- 22 Tháng Năm, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS [SCSS]
Về mã
Nền sao lấp lánh CSS tinh khiết
Hình ảnh các ngôi sao lấp lánh tinh tế và các đám mây chuyển động chỉ sử dụng CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- osorina irina
- 25 Tháng hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS [Sass]
Về mã
Hiệu ứng nền
Hiệu ứng nền HTML và CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Mohamad Abdul Mohaiman
- 25 Tháng hai, 2018
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Nền hoạt hình CSS thuần túy
Nền hoạt hình CSS thuần túy
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Chris Smith
- Tháng Tám 4, 2017
liên kết
- bản demo và mã
Làm với
- HTML/CSS
Về mã
Hiệu ứng nền đường chéo trượt
Một nền động dưới nội dung
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- bjorn
- 7 Tháng Mười Hai, 2016
liên kết
- bản demo và mã
Làm với
- HTML [Pug] / CSS [SCSS]
Về mã
Hoạt hình nền
Hoạt hình nền HTML và CSS
Trình duyệt tương thích. Chrome, Edge, Firefox, Opera, Safari
Phụ thuộc. -
Tác giả
- Chữ rune Sejer Hoffmann
- 3 Tháng Tám, 2016
liên kết
- bản demo và mã
- Tải xuống
Làm với
- HTML/CSS [SCSS]
Về một mã
SVGS nổi
Chỉ là một nghiên cứu điển hình đơn giản, với SCSS, hiển thị một ví dụ về cách đạt được một số loại hiệu ứng 3D bằng cách sử dụng mờ và phối cảnh