超酷的CSS3网页加载效果
2015-05-30 17:31
525 查看
<!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=gb2312" />
<title>CSS3网页加载效果</title>
<style>
#circular3dG{
position:relative;
width:128px;
height:128px;
}
.circular3dG{
position:absolute;
background-color:#000000;
width:36px;
height:36px;
-webkit-border-radius:38px;
-moz-border-radius:38px;
border-radius:38px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:1.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:1.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:1.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}
#circular3d_1G{
left:52px;
top:8px;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s}
#circular3d_2G{
left:78px;
top:30px;
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-o-animation-delay:0.8s;
-ms-animation-delay:0.8s;
}
#circular3d_3G{
left:94px;
top:58px;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
-ms-animation-delay:1s;
}
#circular3d_4G{
left:88px;
top:86px;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s}
#circular3d_5G{
left:54px;
top:94px;
-webkit-animation-delay:1.4s;
-moz-animation-delay:1.4s;
-o-animation-delay:1.4s;
-ms-animation-delay:1.4s}
#circular3d_6G{
left:10px;
top:62px;
-webkit-animation-delay:1.6s;
-moz-animation-delay:1.6s;
-o-animation-delay:1.6s;
-ms-animation-delay:1.6s;
}
#circular3d_7G{
left:0px;
top:18px;
-webkit-animation-delay:1.8s;
-moz-animation-delay:1.8s;
-o-animation-delay:1.8s;
-ms-animation-delay:1.8s;
}
#circular3d_8G{
left:22px;
top:0px;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
-ms-animation-delay:2s;
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div id="circular3dG">
<div id="circular3d_1G" class="circular3dG"></div>
<div id="circular3d_2G" class="circular3dG"></div>
<div id="circular3d_3G" class="circular3dG"></div>
<div id="circular3d_4G" class="circular3dG"></div>
<div id="circular3d_5G" class="circular3dG"></div>
<div id="circular3d_6G" class="circular3dG"></div>
<div id="circular3d_7G" class="circular3dG"></div>
<div id="circular3d_8G" class="circular3dG"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3网页加载效果</title>
<style>
#circular3dG{
position:relative;
width:128px;
height:128px;
}
.circular3dG{
position:absolute;
background-color:#000000;
width:36px;
height:36px;
-webkit-border-radius:38px;
-moz-border-radius:38px;
border-radius:38px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:1.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:1.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:1.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:1.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
}
#circular3d_1G{
left:52px;
top:8px;
-webkit-animation-delay:0.6s;
-moz-animation-delay:0.6s;
-o-animation-delay:0.6s;
-ms-animation-delay:0.6s}
#circular3d_2G{
left:78px;
top:30px;
-webkit-animation-delay:0.8s;
-moz-animation-delay:0.8s;
-o-animation-delay:0.8s;
-ms-animation-delay:0.8s;
}
#circular3d_3G{
left:94px;
top:58px;
-webkit-animation-delay:1s;
-moz-animation-delay:1s;
-o-animation-delay:1s;
-ms-animation-delay:1s;
}
#circular3d_4G{
left:88px;
top:86px;
-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
-ms-animation-delay:1.2s}
#circular3d_5G{
left:54px;
top:94px;
-webkit-animation-delay:1.4s;
-moz-animation-delay:1.4s;
-o-animation-delay:1.4s;
-ms-animation-delay:1.4s}
#circular3d_6G{
left:10px;
top:62px;
-webkit-animation-delay:1.6s;
-moz-animation-delay:1.6s;
-o-animation-delay:1.6s;
-ms-animation-delay:1.6s;
}
#circular3d_7G{
left:0px;
top:18px;
-webkit-animation-delay:1.8s;
-moz-animation-delay:1.8s;
-o-animation-delay:1.8s;
-ms-animation-delay:1.8s;
}
#circular3d_8G{
left:22px;
top:0px;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
-o-animation-delay:2s;
-ms-animation-delay:2s;
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
</style>
</head>
<body>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
<div id="circular3dG">
<div id="circular3d_1G" class="circular3dG"></div>
<div id="circular3d_2G" class="circular3dG"></div>
<div id="circular3d_3G" class="circular3dG"></div>
<div id="circular3d_4G" class="circular3dG"></div>
<div id="circular3d_5G" class="circular3dG"></div>
<div id="circular3d_6G" class="circular3dG"></div>
<div id="circular3d_7G" class="circular3dG"></div>
<div id="circular3d_8G" class="circular3dG"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ios文本框字体样式
- 引入css外部样式表
- CSS3 box-shadow(阴影使用)
- 反馈表样式
- 调查表样式设计
- CSS背景图拉伸自适应尺寸，全浏览器兼容
- [置顶] OpenLayers 3 之 地图样式（ol.style）详解
- geoserver地图服务器应用中要用到的地图样式API
- 设计多彩下拉列表样式
- css设计指南中有意思的部分
- css3 display:box box-flex 实现未知高度节点相对父级垂直居中
- css-backgournd-position详解
- 图解利用CSS实现三角形
- CSS Hack技术详解，支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、Fi...
- [css][移动设备]禁止横竖屏时内容自动调整
- CSS知识总结
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)
- 【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位) 分类： HTML+CSS 2015-05-29 23:01 842人阅读 评论(0) 收藏
- css伪类 附加一般导航栏代码