Nền không gian CSS

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

  1. Hiệu ứng nền JavaScript
  2. 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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ỗi div có một clip-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 định nth-children tương ứng với một hàng và di chuyển chúng lên trên qua transform: 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.

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.

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