Cách thêm hoạt ảnh Neon như trợ lý Google ở ​​cuối trang web của bạn

Xin chào mọi người hôm nay tôi sẽ cung cấp cho bạn một mã hoạt ảnh tuyệt vời mà từ đó bạn có thể thêm hoạt ảnh dòng phát sáng neon ở cuối trang web của mình như trợ lý Google.

Chỉ cần làm theo một số bước đơn giản để thêm hoạt ảnh này vào trang web của bạn

CÁC BƯỚC

Trước khi làm theo các bước này, vui lòng sao lưu chủ đề của bạn để làm cho trang web + chủ đề của bạn an toàn hơn.

Các bước

1. Tìm </b:skin> trong mẫu / chủ đề trang web của bạn
2. Sao chép CSS bên dưới và dán nó lên trên </b:skin>

/* Bottom Bar Animation by NewTricks */ .animeTWD,.animeBlurTWD{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.animeBlurTWD{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} 

3. Bây giờ, hãy tìm </footer>
4. Sao chép mã dưới đây và dán ngay trên </footer>

<!--[ Bottom Bar Animation by NewTricks ]-->
<div class='animeTWD'>
  <div class='animeBlurTWD'>
  </div>
</div>

Đừng quên lưu chủ đề của bạn

Lời kết

Đó là tất cả về cách thêm hoạt ảnh phát sáng neon vào trang web của bạn như trợ lý Google. Tôi hy vọng bạn thích bài viết của chúng tôi.

Nếu bạn có bất kỳ câu hỏi và câu hỏi liên quan đến bài viết này, xin vui lòng để lại bình luận phía bên dưới.