纯css3实现的动画加载条_html/css_WEB-ITnose-html tutorial-php.cn

纯css3实现的动画加载条_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:49:41

asal

1076 orang telah melayarinya

之前大大家分享了很多款加载条。今天给大家带来一款纯css3实现的动画加载条。这款加载条适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：

在线预览源码下载

实现的代码。

html代码：

 <div class="wrapper">        <div class="bar">            <p class="text">                Loading bar</p>        </div>    </div>

Salin selepas log masuk

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%;  }}

Salin selepas log masuk

via：http://www.w2bc.com/Article/20214