web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
进度条
CSS3 animation超酷网页Loading加载进度条动画效果
分类:
进度条
日期:
2024-05-14
点击(7)
评论(0)
演 示
免费下载
简介
效果一 ```css ul#progress{ list-style:none; width:125px; margin:0 auto; padding-top:50px; padding-bottom:50px; } ul#progress li{ float:left; position:relative; width:15px; height:15px; border:1px solid #fff; border-radius:50px; margin-left:10px; border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333; background:#000; } ul#progress li:first-child{margin-left:0;} .running .ball{ background-color:#2187e7; background-image:-moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image:-webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); width:15px; height:15px; border-radius:50px; -moz-transform:scale(0); -webkit-transform:scale(0); -moz-animation:loading 1s linear forwards; -webkit-animation:loading 1s linear forwards; } .running .pulse{ width:15px; height:15px; border-radius:30px; border:1px solid #00c6ff; box-shadow:0 0 5px #00c6ff; position:absolute; top:-1px; left:-1px; -moz-transform:scale(0); -webkit-transform:scale(0); -webkit-animation:pulse 1s ease-out; -moz-animation:pulse 1s ease-out; } #layer1{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;} #layer2{-moz-animation-delay:1s;-webkit-animation-delay:1s;} #layer3{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layer4{-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layer5{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layer7{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layer8{-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layer9{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layer10{-moz-animation-delay:3s;-webkit-animation-delay:3s;} #layer11{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;} @-moz-keyframes loading{ 0%{-moz-transform:scale(0,0);} 100%{-moz-transform:scale(1,1);} } @-webkit-keyframes loading{ 0%{-webkit-transform:scale(0,0);} 100%{-webkit-transform:scale(1,1);} } @-moz-keyframes pulse{ 0% {-moz-transform:scale(0);opacity:0;} 10% {-moz-transform:scale(1);opacity:0.5;} 50% {-moz-transform:scale(1.75);opacity:0;} 100%{-moz-transform:scale(0);opacity:0;} } @-webkit-keyframes pulse{ 0% {-webkit-transform:scale(0);opacity:0;} 10% {-webkit-transform:scale(1);opacity:0.5;} 50% {-webkit-transform:scale(1.75);opacity:0;} 100%{-webkit-transform:scale(0);opacity:0;} } ``` 效果二 ```css #content{ width:100%; height:5px; margin:50px auto; background:#000; } .fullwidth .expand{ width:100%; height:1px; margin:2px 0; background:#2187e7; position:absolute; box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7); -moz-animation:fullexpand 10s ease-out; -webkit-animation:fullexpand 10s ease-out; } @-moz-keyframes fullexpand{ 0%{width:0px;} 100%{ width:100%;} } @-webkit-keyframes fullexpand{ 0%{width:0px;} 100%{ width:100%;} } ``` 效果三 ```css ul#loadbar{ list-style:none; width:140px; margin:0 auto; padding-top:50px; padding-bottom:75px; } ul#loadbar li{ float:left; position:relative; width:11px; height:26px; margin-left:1px; border-left:1px solid #111;border-top:1px solid #111;border-right:1px solid #333;border-bottom:1px solid #333; background:#000; } ul#loadbar li:first-child{margin-left:0;} .ins .bar{ background-color:#2187e7; background-image:-moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image:-webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); width:11px; height:26px; opacity:0; -webkit-animation:fill .5s linear forwards; -moz-animation:fill .5s linear forwards; } #layerFill1{-moz-animation-delay:0.5s;-webkit-animation-delay:0.5s;} #layerFill2{-moz-animation-delay:1s;-webkit-animation-delay:1s;} #layerFill3{-moz-animation-delay:1.5s;-webkit-animation-delay:1.5s;} #layerFill4{-moz-animation-delay:2s;-webkit-animation-delay:2s;} #layerFill5{-moz-animation-delay:2.5s;-webkit-animation-delay:2.5s;} #layerFill6{-moz-animation-delay:3s;-webkit-animation-delay:3s;} #layerFill7{-moz-animation-delay:3.5s;-webkit-animation-delay:3.5s;} #layerFill8{-moz-animation-delay:4s;-webkit-animation-delay:4s;} #layerFill9{-moz-animation-delay:4.5s;-webkit-animation-delay:4.5s;} #layerFill10{-moz-animation-delay:5s;-webkit-animation-delay:5s;} @-moz-keyframes fill{ 0%{ opacity:0;} 100%{ opacity:1;} } @-webkit-keyframes fill{ 0%{ opacity:0;} 100%{ opacity:1;} } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告