欣赏下国外人css3打造的载入动画

代码如下记得支持css3浏览器预览如FF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3载入中动画www.iiwnet.com</title>
<style type="text/css">
ul#progress {list-style:none;width:125px;margin:0 auto;padding-top:50px;padding-bottom:50px;
}
ul#progress li { /* Style your list */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; } /* Remove the margin first li element */
.ball { /* Style your ball and set the animation */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;
}
.pulse { /* Style your second ball to create the amazing effects */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;
}
/* Control Layers */
#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;}
}
body{ background:#333;}
/***************************************************************/
#content {width:100%; /* Full Width */height:5px;margin:50px auto;background:#000;
}
.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;
}
/* Full Width Animation Bar */
@-moz-keyframes fullexpand {0%  { width:0px;}100%{ width:100%;}
}
@-webkit-keyframes fullexpand {0%  { width:0px;}100%{ width:100%;}
}
/***********************************************************************/
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; }
.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; }
}
</style>
</head>
<body>
<ul id="progress"><li><div id="layer1" class="ball"></div><!-- layer1 control delay animation / ball is effect --><div id="layer7" class="pulse"></div><!-- layer7 control delay animation / pulse is effect  --></li><li><div id="layer2" class="ball"></div><div id="layer8" class="pulse"></div></li><li><div id="layer3" class="ball"></div><div id="layer9" class="pulse"></div></li><li><div id="layer4" class="ball"></div><div id="layer10" class="pulse"></div></li><li><div id="layer5" class="ball"></div><div id="layer11" class="pulse"></div></li>
</ul>
<div id="content">
<span class="expand"></span>
</div>
<p> </p>
<ul id="loadbar"><li><div id="layerFill1" class="bar"></div> <!-- Control Layer + Bar  --></li><li><div id="layerFill2" class="bar"></div></li><li><div id="layerFill3" class="bar"></div></li><li><div id="layerFill4" class="bar"></div></li><li><div id="layerFill5" class="bar"></div></li><li><div id="layerFill6" class="bar"></div></li><li><div id="layerFill7" class="bar"></div></li><li><div id="layerFill8" class="bar"></div></li><li><div id="layerFill9" class="bar"></div></li><li><div id="layerFill10" class="bar"></div></li>
</ul>
</body>
</html>

演示地址：http://www.iiwnet.com/js_texiao/779.html

转载于:https://my.oschina.net/xixios/blog/79134

欣赏下国外人css3打造的载入动画相关推荐

html5和css3打造一款创意404页面
之前和网友分享一款HTML5可爱的404页面动画很逗的机器人.今天要爱编程小编要再给大家带来一款html5和css3打造的创意404页面.一起看下效果图吧: 在线预览源码下载实现的代码. h ...
CSS3打造的10种创意动画菜单效果
CSS3新增添了实现动画效果的新功能,通过本文,你可以对这些新功能有个初步了解.本文将为大家带来一些充满创意的菜单悬停效果.它由图标,主标题,副标题等简单的元素构成,通过CSS3最新的过渡(trans ...
html 3d立体阴影效果图,CSS3打造带阴影的旋转3D图像
CSS3打造带阴影的旋转3D图像 Sponsor CSS3可以实现很多创新好玩的交互效果,正如今天将和大家介绍的3D旋转图像,效果很漂亮,这个旋转图像的特别之处就是支持阴影旋转和兼容响应式网页设计,使 ...
Android ListView下拉刷新、上拉载入更多
找下拉刷新,上拉加载的demo找了好久,踩找到这个相对完美的.所以分享给大家 https://github.com/Maxwin-z/XListView-Android 0. XListView继承L ...
ListView下拉刷新、上拉载入更多之封装改进
在Android中ListView下拉刷新.上拉载入更多示例一文中,Maxwin兄给出的控件比较强大,前面有详细介绍,但是有个不足就是,里面使用了一些资源文件,包括图片,String,layout,这 ...
vue 图片被背景色覆盖_如何使用纯css3打造有点意思的故障艺术(附React/Vue加强组件版)...
前言很早之前就看到国外很多酷炫的网站在实践"故障艺术", 或者错位动画", 感觉非常有意思, 现在APP端的抖音启动界面有着这种设计的影子, 作为一名用于探索未知的前端 ...
css下拉点击不动,CSS3 - 进行简单的点击下拉[关闭](CSS3 - Making a simple click-dropdown [closed])...
CSS3 - 进行简单的点击下拉[关闭](CSS3 - Making a simple click-dropdown [closed]) 有人可以帮助我使用与此页面相同的下拉列表的代码吗? 我想做同样 ...
win7连接sftp_Windows下用sftp巧妙打造安全传输
众所周知在系统和Linux类系统的最大区别就在于他的非开源性,因此在下我们传输文件,共享资源主要通过FTP来实现,和以前的TFTP相比FTP提供了必要的保证措施,然而对于一些要求网络级别比较高,需要严 ...
css3实现磨砂效果,CSS3打造磨砂玻璃背景效果
简介这个效果是在看CSS Secrets这书上看到的,感觉很不错; 实现原理也挺简单的; 效果图及实现效果图代码实现 Document /** * 设置背景图全屏覆盖及固定 * 设置内部元素偏移 ...

欣赏下国外人css3打造的载入动画

欣赏下国外人css3打造的载入动画相关推荐

最新文章

热门文章