之前大大家分享了很多款加载条。今天给大家带来一款纯css3实现的动画加载条。 这款加载条适用浏览器：360、firefox、chrome、safari、opera、傲游、搜狗、世界之窗. 不支持ie8及以下浏览器。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
立即学习“前端免费学习笔记（深入）”；
<div class="wrapper"> <div class="bar"> <p class="text"> Loading bar</p> </div> </div>
css3代码：
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}.wrapper { position: relative; overflow: hidden; width: 500px; margin: 0 auto;}.bar { border: solid 1px #e3e3e3; margin: 40px 30px; padding: 8px 0; height: 55px;}.text { font-size: 22px; margin: 15px 0; text-align: center; text-transform: uppercase;}.text-gradient { width: 100%; font-size: 22px; font-weight: bold; text-align: center; color: #ffa600; background: -webkit-linear-gradient(left, #000, #ffa600); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}.bar { background: #ffa600; background: -webkit-linear-gradient(left, #ffa600 0%, #ffa600 50%, #fff 50%, #fff 100%); background: -moz-linear-gradient(left, #ffa600 0%, #ffa600 50%, #fff 50%, #fff 100%); background: -o-linear-gradient(left, #ffa600 0%, #ffa600 50%, #fff 50%, #fff 100%); background: -ms-linear-gradient(left, #ffa600 0%, #ffa600 50%, #fff 50%, #fff 100%); background: linear-gradient(left, #ffa600 0%, #ffa600 50%, #fff 50%, #fff 100%); background-size: 200% 200%; -webkit-animation: AnimationName 10s ease infinite;}@-webkit-keyframes AnimationName { 0% { background-position: 100% 0%; } 100% { background-position: 0% 0%; }}.bar .text { background: #ffa600; background: -webkit-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); background: -moz-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); background: -o-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); background: -ms-linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); background: linear-gradient(left, #fff 0%, #fff 50%, #000 50%, #000 100%); background-size: 200% 200%; -webkit-animation: AnimationName 10s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}@-webkit-keyframes AnimationName { 0% { background-position: 100% 0%; } 100% { background-position: 0% 0%; }}via：http://www.w2bc.com/Article/20214
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
830
收藏
