css3 背景色 实现边框渐变运动动画
css3
#body_id { animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 10s ease-in-out -2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 10s ease-in-out -2s infinite alternate; /* Opera: */ -o-animation: myfirst 10s ease-in-out -2s infinite alternate; height: 51px; } .mui-bar { -webkit-box-shadow: none; box-shadow: none; background: #FFFFFF; height: 50px; } @keyframes myfirst { 0% { background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace); background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace); background: -o-linear-gradient(left, red, #f96, yellow, green, #ace); background: linear-gradient(left, red, #f96, yellow, green, #ace); } 25% { background: -moz-linear-gradient(left, #ace, red, #f96, yellow, green); background: -webkit-linear-gradient(left, #ace, red, #f96, yellow, green); background: -o-linear-gradient(left, #ace, red, #f96, yellow, green); background: linear-gradient(left, #ace, red, #f96, yellow, green); } 50% { background: -moz-linear-gradient(left, green, #ace, red, #f96, yellow); background: -webkit-linear-gradient(left, green, #ace, red, #f96, yellow); background: -o-linear-gradient(left, green, #ace, red, #f96, yellow); background: linear-gradient(left, green, #ace, red, #f96, yellow); } 75% { background: -moz-linear-gradient(left, yellow, green, #ace, red, #f96); background: -webkit-linear-gradient(left, yellow, green, #ace, red, #f96); background: -o-linear-gradient(left, yellow, green, #ace, red, #f96); background: linear-gradient(left, yellow, green, #ace, red, #f96); } 100% { background: -moz-linear-gradient(left, #f96, yellow, green, #ace, red); background: -webkit-linear-gradient(left, #f96, yellow, green, #ace, red); background: -o-linear-gradient(left, #f96, yellow, green, #ace, red); background: linear-gradient(left, #f96, yellow, green, #ace, red); } } @-moz-keyframes myfirst /* Firefox */ { 0% { background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace); } 25% { background: -moz-linear-gradient(left, #ace, red, #f96, yellow, green); } 50% { background: -moz-linear-gradient(left, green, #ace, red, #f96, yellow); } 75% { background: -moz-linear-gradient(left, yellow, green, #ace, red, #f96); } 100% { background: -moz-linear-gradient(left, #f96, yellow, green, #ace, red); } } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% { background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace); } 25% { background: -webkit-linear-gradient(left, #ace, red, #f96, yellow, green); } 50% { background: -webkit-linear-gradient(left, green, #ace, red, #f96, yellow); } 75% { background: -webkit-linear-gradient(left, yellow, green, #ace, red, #f96); } 100% { background: -webkit-linear-gradient(left, #f96, yellow, green, #ace, red); } } @-o-keyframes myfirst /* Opera */ { 0% { background: -o-linear-gradient(left, red, #f96, yellow, green, #ace); } 25% { background: -o-linear-gradient(left, #ace, red, #f96, yellow, green); } 50% { background: -o-linear-gradient(left, green, #ace, red, #f96, yellow); } 75% { background: -o-linear-gradient(left, yellow, green, #ace, red, #f96); } 100% { background: -o-linear-gradient(left, #f96, yellow, green, #ace, red); } }
html
<div id="body_id" class="mui-bar mui-bar-tab"> <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" class="mui-tab-item mui-active" href="home/home.html"> <span class="mui-icon "><img src="images/index/home_tab@2x1.png" id="home/home.html"></span> <span class="mui-tab-label">首页</span> </a> <a class="mui-tab-item" href="found/found.html"> <span class="mui-icon "><img src="images/index/found_tab@2x.png" id="found/found.html"></span> <span class="mui-tab-label">发现</span> </a> <a class="mui-tab-item" href="release/release.html"> <span class="mui-icon "><img src="images/index/release_tab@2x.png" id="release/release.html"></span> <span class="mui-tab-label">发布</span> </a> <a class="mui-tab-item" href="message/message.html"> <span class="mui-icon "><img src="images/index/message_tab@2x.png" id="message/message.html"><span class="mui-badge">9</span></span> <span class="mui-tab-label">消息</span> </a> <a class="mui-tab-item" href="me/me.html"> <span class="mui-icon "><img src="images/index/me_tab@2x.png" id="me/me.html"/></span> <span class="mui-tab-label">个人中心</span> </a> </nav> </div>
当然也可以这么写,运动更流畅
#body_id { background: -moz-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace); background: -webkit-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace); background: -o-linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace); background: linear-gradient(left, red, #f96, yellow, green, #ace, red, #f96, yellow, green, #ace); animation: myfirst 10s ease-in-out -2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 10s ease-in-out -2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 10s ease-in-out -2s infinite alternate; /* Opera: */ -o-animation: myfirst 10s ease-in-out -2s infinite alternate; height: 51px; width: 150%; overflow: hidden; } .mui-bar { -webkit-box-shadow: none; box-shadow: none; background: #FFFFFF; height: 50px; } @keyframes myfirst { 0% { bottom:0 ;left: -50%; } 25% { bottom:0 ;left: 0%; } 50% { bottom:0 ;left: -50%; } 75% { bottom:0 ;left: 0%; } 100% { bottom:0 ;left: -50%; } } @-moz-keyframes myfirst /* Firefox */ { 0% { bottom:0 ;left: -50%; } 25% { bottom:0 ;left: 0%; } 50% { bottom:0 ;left: -50%; } 75% { bottom:0 ;left: 0%; } 100% { bottom:0 ;left: -50%; } } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% { bottom:0 ;left: -50%; } 25% { bottom:0 ;left: 0%; } 50% { bottom:0 ;left: -50%; } 75% { bottom:0 ;left: 0%; } 100% { bottom:0 ;left: -50%; } } @-o-keyframes myfirst /* Opera */ { 0% { bottom:0 ;left: -50%; } 25% { bottom:0 ;left: 0%; } 50% { bottom:0 ;left: -50%; } 75% { bottom:0 ;left: 0%; } 100% { bottom:0 ;left: -50%; } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· winform 绘制太阳,地球,月球 运作规律
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)