- 7 Màu
- about
- Ajax
- ảnh
- Ảnh b tháng 4
- Ảnh Bìa
- Ảnh bìa ca sĩ
- Ảnh bìa Facebook
- Ảnh bìa gái đẹp
- Ảnh bìa giáng sinh
- ảnh bìa liên minh huyền thoại
- Ảnh bìa năm mới
- Ảnh bìa tháng 10
- Ảnh bìa tháng 11
- Ảnh bìa tháng 12
- Ảnh bìa tháng 4
- Ảnh bìa tháng 8
- Ảnh bìa tháng 9
- Ảnh chế
- Ảnh chibi
- Ảnh Đẹp
- Ảnh động
- asp.net core
- ASP.NET Core Identity
- asp.net mvc
- backend
- Blogger Templates
- blogspot
- Brush
- Cafe Code
- Christmas
- Chữ nghệ thuật
- Chúc mừng năm mới
- Chuyện tình bác sĩ
- Cô Đơn
- Code
- css
- Dame
- Double Exposure
- Download
- Ebook
- EPPlus
- Faq
- File 3D
- flutter
- Font chữ
- Font chữ việt hóa
- frontend
- Fshare.vn
- Giáng sinh
- Hacker
- Hacking
- Halloween
- Hiệu ứng chữ
- Hình nền máy tính
- học javascript
- Hot Girl
- HTML - CSS - ?
- html/css
- Hướng dẫn cover ảnh bìa
- Hướng dẫn Photoshop
- javascript
- javascript dom
- Khung ảnh bìa
- Khung Hình
- Kĩ năng seo
- lập trình asp.net
- lập trình mobile
- Logo
- Mặt Nạ
- Mockup
- ngày nhà giáo Việt Nam
- Ngày phụ nữ
- Noel
- Phần Mềm
- Phiêu Lưu
- Phím tắt
- Photoshop
- PNG
- Pokémon
- PSD
- PSD 3D Text
- PSD ảnh bìa
- psd đường một chiều
- Seo
- service
- Soái Ca
- Sơn Tùng M-TP
- source code
- Stock Ảnh
- Sự kiện Blogger
- Tâm Trạng
- tản mạn
- Tất cả bài viết
- template
- template chuẩn seo
- templates đẹp
- Tết
- Tết trung thu
- Text Effect
- Thầy cô
- Thủ Thuật
- Thủ thuật Blogger
- Thủ thuật Facebook
- Thủ thuật Photoshop
- Tiện ích Blogger
- Tìm hiểu về Photoshop
- Tình Yêu
- Tutorial
- Typo
- Typography
- ui ux design
- Valentine
- Vector
- Video
Chia sẻ code thay đổi nền background chuyển đổi liên tục
Chào các bạn, chắc có lẽ bạn muốn Blog của bạn thật màu sắc và sinh động, chính vì đó, thay đổi nền background chuyển đổi liên tục là một ý kiến hay và tuyệt vời bạn. Nào, bây giờ chúng ta bắt đầu nhé.
Chia sẻ code thay đổi nền background chuyển đổi liên tục |
Chia sẻ code thay đổi nền background chuyển đổi liên tục
Cách 1: Sử dụng jquery
<script type="text/javascript"> //<![CDATA[ var colors = new Array([62, 35, 255], [60, 255, 60], [255, 35, 98], [45, 175, 230], [255, 0, 255], [255, 128, 0]); var step = 0; var colorIndices = [0, 1, 2, 3]; var gradientSpeed = 0.002; function updateGradient() { if ($ === undefined) return; var c0_0 = colors[colorIndices[0]]; var c0_1 = colors[colorIndices[1]]; var c1_0 = colors[colorIndices[2]]; var c1_1 = colors[colorIndices[3]]; var istep = 1 - step; var r1 = Math.round(istep * c0_0[0] + step * c0_1[0]); var g1 = Math.round(istep * c0_0[1] + step * c0_1[1]); var b1 = Math.round(istep * c0_0[2] + step * c0_1[2]); var color1 = "rgb(" + r1 + "," + g1 + "," + b1 + ")"; var r2 = Math.round(istep * c1_0[0] + step * c1_1[0]); var g2 = Math.round(istep * c1_0[1] + step * c1_1[1]); var b2 = Math.round(istep * c1_0[2] + step * c1_1[2]); var color2 = "rgb(" + r2 + "," + g2 + "," + b2 + ")"; $('body').css({ background: "-webkit-gradient(linear, left top, right top, from(" + color1 + "), to(" + color2 + "))" }).css({ background: "-moz-linear-gradient(left, " + color1 + " 0%, " + color2 + " 100%)" }); step += gradientSpeed; if (step >= 1) { step %= 1; colorIndices[0] = colorIndices[1]; colorIndices[2] = colorIndices[3]; colorIndices[1] = (colorIndices[1] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; colorIndices[3] = (colorIndices[3] + Math.floor(1 + Math.random() * (colors.length - 1))) % colors.length; } } setInterval(updateGradient, 10); //]]> </script>Cách 2: Sử dụng CSS
body { animation: colorBackground 20s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */ -webkit-animation: colorBackground 20s infinite; /* Chrome, Safari 5+ */ -moz-animation: colorBackground 20s infinite; /* Firefox 5-15 */ -o-animation: colorBackground 20s infinite; /* Opera 12.00 */ }/* change background */ @keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-webkit-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-moz-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } } @-o-keyframes colorBackground { 0% { background-color: #fbcf61; color: #fbcf61; } 20% { background-color: #6bd57e; color: #6bd57e; } 40% { background-color: #ff6f6f; color: #ff6f6f; } 60% { background-color: #57cff4; color: #57cff4; } 80% { background-color: #0ed4c8; color: #0ed4c8; } 100% { background-color: #fbcf61; color: #fbcf61; } }
Lời Kết
Để thêm nền background chuyển đổi liên tục này vào Blog của bạn thì các bạn thêm toàn bộ đoạn code css ở cách 2 vào trước thẻ đóng ]]></b:skin> trong Mẫu của Blogger nhé.
Chúc các bạn thành công.
Chúc các bạn thành công.
Có lẽ bạn thích?
3 comments
Danh Mục
Blog Bạn Bè
Comments
Địa chỉ
52 Xô Viết Nghệ Tĩnh, Hải Châu, Đà Nẵng
Cảm ơn ad =))
ReplyDeleteSang năm mới 2017, chúc bác cùng blog ngày càng phát triển và gặt hái nhiều thành công nhé
ReplyDeleteCảm ơn bác nhé =))
Delete