Hình dạng nền CSS codepen
|
Bạn có thể sử dụng hoạt ảnh nền CSS để giúp trang web của mình nổi bật giữa đám đông, nhấn mạnh thương hiệu của bạn hoặc đơn giản là để trông thật bắt mắt. Và bởi vì CSS đã trở nên rất mạnh mẽ, bạn có thể tạo một số hiệu ứng nền CSS đẹp mắt mà không cần một dòng JavaScript nào. Giờ đây, bạn thậm chí có thể tạo nền video chỉ bằng CSS. Ai đã nói với chúng ta điều đó 15 năm trước, huh? Show
Vì vậy, đây là 20 hình nền hoạt hình tuyệt vời mà bạn có thể sử dụng trong các dự án của mình hoặc lấy cảm hứng từ đó. Lý tưởng cho các trang web thanh trượt anh hùng 1) Màu nền động trong CSSXem Bút trên CodePen Hãy bắt đầu với những điều cơ bản. Làm mờ màu đơn giản - bạn có thể sử dụng Đơn giản, dễ thực hiện và hiệu quả 2) Độ dốc nền hoạt hình CSSXem Bút trên CodePen Bây giờ, hãy nâng nó lên một tầm cao - thay vì một màu đơn lẻ mờ dần sang một màu khác, bạn có thể thêm một lớp bổ sung bằng một dải màu, quét qua lại một cách thú vị trên màn hình. Đây là một trong những cách dễ nhất để tạo nền chuyển động trong CSS 3) Hình vuông nổiXem Bút trên CodePen Đã đến lúc thêm một số đối tượng vào hỗn hợp. Đây là một hình nền chuyển động thú vị (chỉ CSS, tin hay không tùy bạn) của TokyoWeb. Những hình vuông xoay bán trong suốt này nổi lên trên màn hình Điều này trông rất tuyệt, nhưng điều thú vị là bạn có thể thử với mã để tạo ra các màu sắc, hình dạng, hướng và tốc độ khác nhau. Đội chiếc mũ sáng tạo của bạn lên và xem những gì bạn nghĩ ra 4) Hiệu ứng nền CSS pháo hoa - phiên bản 1Xem Bút trên CodePen Bản thân hiệu ứng pháo hoa hoạt hình CSS thuần túy này sẽ trông rất tuyệt (có thể rất tuyệt trên trang "Xin chúc mừng" hoặc "Thành công" hoặc đại loại như thế), nhưng có thể trông còn tuyệt hơn nữa với hình ảnh tiền cảnh, có thể là cảnh quan thành phố 5) Hiệu ứng nền CSS pháo hoa - phiên bản 2Xem Bút trên CodePen Đây là một cách tiếp cận khác mà bạn có thể thực hiện với pháo hoa - phiên bản này mang lại cảm giác khác - các hạt có chuyển động tự nhiên hơn, gần như thể có lực hấp dẫn đối với chúng 6) Hiệu ứng nền CSS gieo hạtXem Bút trên CodePen Nền chuyển động này (chỉ dành cho CSS) có cảm giác hơi giống như di chuyển qua một bể bóng ở tốc độ dọc. tôi thích nó 7) Dòng mờXem Bút trên CodePen Nếu Robin Thicke tạo hiệu ứng nền CSS, thì đây có thể là thứ mà anh ấy nghĩ ra. Kiểu chữ này bắt mắt mà không gây rối mắt - lưu ý rằng ngay cả với kiểu chữ khá nhạt này, văn bản vẫn dễ đọc 8) Nền CSS hoạt hình dạng lưới cổ điểnXem Bút trên CodePen Bạn có phải là fan hâm mộ của cái nhìn cổ điển thập niên 80? Bạn có thể thay đổi màu sắc bằng các biến Đối với một ví dụ khác trong chủ đề này, hãy xem cái này nữa Xem Bút trên CodePen
9) Nền hoạt hình hiệu ứng tuyết rơi (chỉ CSS)Xem Bút trên CodePen Tôi không biết liệu đó có phải là mùa lễ hội vào thời điểm bạn đang đọc cái này không. Đối với tôi, nó không quan trọng. Tôi sẽ đội chiếc mũ ông già Noel của mình và xem Elf bất cứ lúc nào trong năm. Nếu bạn cũng cảm thấy như vậy, thì đây là hiệu ứng tuyết rơi tuyệt đẹp dành cho bạn - với những bông tuyết thật 10) Nền tuyết rơi thị saiXem Bút trên CodePen Bạn nói gì vậy, bạn muốn có nhiều tuyết hơn nữa? . Thế còn cái này thì sao? 11) Tam giác vô hạnXem Bút trên CodePen Cái này đánh lừa bộ não của bạn. Các hình tam giác di chuyển lên hay xuống? 12) Hình ảnh động trái tim vô hạn nổiXem Bút trên CodePen Giống như các hình tam giác ở trên, đây là một hoạt hình nền CSS khác được xếp thẳng vào danh mục "trippy". Với cái này, bạn không chỉ có được một hình nền động thú vị mà còn có thể mở các luân xa của mình cùng một lúc. Thưởng 13) Đom đóm CSSXem Bút trên CodePen Những con đom đóm nhỏ này gợi lên một cảm giác kỳ diệu và hấp dẫn. Hiệu ứng trông rất tuyệt với nền rừng, nhưng cũng hoạt động thực sự tốt trên một màu đơn sắc Xem Bút trên CodePen 14) Hình vuông thôi miênXem Bút trên CodePen Những ô vuông Hypno này dễ thương và khá độc đáo. Tuy nhiên, đừng nhìn vào chúng quá lâu - chúng có thể đang truyền những thông điệp tiềm thức đến tiềm thức của bạn 15) Hoạt hình bong bóng mờXem Bút trên CodePen Những bong bóng mờ/hơi mất nét này xuất hiện dường như một cách ngẫu nhiên, mang lại niềm vui và hạnh phúc trong một thời gian ngắn, rồi dần dần nhưng chắc chắn sẽ biến mất. Nhân tiện, đó cũng là một mô tả chính xác về cuộc sống tình yêu của tôi - nhưng đó là một câu chuyện cho một thời điểm khác 16) Đèn dung nham hoạt hình CSSXem Bút trên CodePen OK, cho đến giờ bạn đã thấy một số ví dụ hoạt hình nền CSS thú vị mà bạn có thể cắm và chạy khá nhiều. Bây giờ, hãy khám phá những điều có thể xảy ra khi bạn đứng đầu trò chơi của mình - bắt đầu với chiếc đèn dung nham chỉ dành cho CSS này của Janos Szudi 17) Nền hoạt hình hiệu ứng ma trận (CSS)Xem Bút trên CodePen Cái này đẹp đấy. Toàn bộ điều này thực sự được thực hiện chỉ bằng cách thay đổi màu sắc trên các phần tử hình vuông nhỏ, tạo ra hiệu ứng có thể nhận ra ngay lập tức  18) Hoạt hình nền CSS ngọn hải đăng vào ban đêmXem Bút trên CodePen Bạn nghĩ sao về tác phẩm tuyệt vời này của Cameron Fitzwilliam. Bây giờ, cái này sử dụng JS. nhưng. JS chỉ kiểm soát cách hình ảnh phản ứng với chuyển động chuột của bạn. Bạn có thể xóa tất cả JS và các hình ảnh động trên sóng và đèn hải đăng sẽ vẫn hoạt động. Vì vậy, tôi cho phép nó 19) Tìm kiếm sách đơn thuần CSS DivXem Bút trên CodePen Đây là một hoạt hình CSS thực sự đẹp và dễ thương của Lynn Fisher tuyệt vời. Nhưng hãy kiểm tra hộp HTML trong trình chỉnh sửa. Không, đừng điều chỉnh màn hình của bạn, bạn đang thấy điều đó đúng - cô ấy đã làm điều này bằng một div duy nhất. CSS thuần túy không có gì tinh khiết hơn thế. Hay nó 20) Không có hoạt hình CSS Div CarXem Bút trên CodePen Ở đây abxlfazl khxrshidi đã tiến thêm một bước và tạo nền hoạt hình CSS này cho một chiếc ô tô (một thứ sẽ sớm bị thu hút bởi vẻ ngoài của nó. ), không có Hãy tự kiểm tra, hộp HTML trống, ngoài các nhận xét. Cách họ đã làm là áp dụng tất cả CSS của họ cho phần tử Thật tuyệt vời khi bạn có thể nghĩ ra những gì khi bạn thành thạo nghề của mình. Nhưng một trong những điều thú vị về phát triển web giao diện người dùng là chúng tôi có thể sử dụng các đoạn mã, thư viện và khung do những người có kỹ năng cao hơn chúng tôi tạo ra. Bằng cách đó, chúng ta không phải đợi cho đến khi thành thạo mới bắt đầu tạo ra những thứ thực sự thú vị Một thư viện như vậy mà tôi khuyên bạn nên xem là fullPage. js Trình duyệt của bạn không hỗ trợ thẻ video fullPage giúp bạn xây dựng các trang toàn trang - nơi bạn chia trang web của mình thành nhiều phần, mỗi phần chiếm toàn bộ kích thước trình duyệt của người dùng. Bạn biết loại - khi bạn cuộn, bạn sẽ chuyển sang trang tiếp theo, thay vì chỉ cuộn xuống một chút. Vẫn chưa biết tôi đang nói về cái gì? Với fullPage, bạn có thể tích hợp các hoạt ảnh nền CSS khác nhau mà chúng tôi vừa xem ở đây, có thể đặt một hoạt ảnh khác trên mỗi trang. Nếu điều đó nghe giống như điều gì đó có thể hoạt động tốt trên một trong các dự án của bạn, thì hãy xem một số ví dụ về những gì nó có thể làm tại đây. toàn trang. js ví dụ |
