当前位置: 网站建设 > 网页设计 > 建站经验 >

CSS网页设计实例 纯CSS制作的网页的loading

时间:2013-03-02 03:47来源:未知 作者:admin 点击:

标签:CSS网页设计实例 纯CSS制作的网页的loading body(13)loading(3)网页设计(881)制作(46)网页(168)实例(55)CSS(655)
/body /html !doctype html PUBLIC -//W3C//DTD XHTML 1, CSS网页布局的常用规范 .0 Transitional//EN html xmlns= head meta http-equiv=Content-Type content=text/html, CSS网页布局容易犯的10个错误 ; charset=utf-8 / titleCSS3 Loading poluoluo.com(c
CSS网页设计实例 纯CSS制作的网页的loading》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302334612013.htm

 

</body>
 
</html>

<!doctype html PUBLIC ",CSS网页技术基本语法;-//W3C//DTD XHTML 1,CSS网页布局的常用规范.0 Transitional//EN" ",CSS网页布局最小高度min-height的使用;
 
<html xmlns=",CSS网页布局排查错误出现的方法;
 
<head>
 
<meta http-equiv="Content-Type" content="text/html,CSS网页布局容易犯的10个错误; charset=utf-8" />
 
<title>CSS3 Loading poluoluo.com(css3,HTML5test)</title>
 
<style>,CSS网页布局学习过程中选择什么软件来辅助?;
 
#bowlG{
 
position:relative;
 
width:128px;
 
height:128px;
 
}
 
#bowl_ringG{
 
position:absolute;
 
width:128px;
 
height:128px;
 
border:11px solid #000000;
 
-moz-border-radius:128px;
 
-webkit-border-radius:128px;
 
border-radius:128px;
 
}
 
.ball_holderG{
 
position:absolute;
 
width:34px;
 
height:128px;
 ,CSS网页实例 适合所有项目通用的reset.css;
left:47px;
 
top:0px;
 
-webkit-animation-name:ball_moveG;
 
-webkit-animation-duration:2s;
 
-webkit-animation-iteration-count:infinite;
 
-webkit-animation-timing-function:linear,CSS网页制作时实现自动换行的小技巧;
 
-moz-animation-name:ball_moveG;
 
-moz-animation-duration:2s;
 
-moz-animation-iteration-count:infinite;
 
-moz-animation-timing-function:linear;
 
-o-animation-name:ball_moveG;
 
-o-animation-duration:2s;
 
-o-animation-iteration-count:infinite;
 
-o-animation-timing-function:linear;
 
-ms-animation-name:ball_moveG;
 
-ms-animation-duration:2s,CSS网页制作教程 CSS属性英文单词的意义解释;
 
-ms-animation-iteration-count:infinite;
 
-ms-animation-timing-function:linear;
 
}
 
.ballG{
 
position:absolute;
 
left:0px;
 
top:-30px;
 
width:51px;
 
height:51px;
 
background:#FFFFFF;
 
-moz-border-radius:43px;
 
-webkit-border-radius:43px;
 
border-radius:43px;
 
}
 
@-webkit-keyframes ball_moveG{
 
0%{
 
-webkit-transform:rotate(0deg)}
 
100%{
 
-webkit-transform:rotate(360deg)}
 
}
 
@-moz-keyframes ball_moveG{
 
0%{
 
-moz-transform:rotate(0deg)}
 
100%{
 
-moz-transform:rotate(360deg)}
 
}
 ,CSS网页制作技巧 强制中英文换行和不换行;
@-o-keyframes ball_moveG{
 
0%{
 
-o-transform:rotate(0deg)}
 
100%{
 
-o-transform:rotate(360deg)}
 
}
 
@-ms-keyframes ball_moveG{
 
0%{
 
-ms-transform:rotate(0deg)}
 
100%{
 
-ms-transform:rotate(360deg)}
 
}
 
</style>
 
</head>
 
<body>
 
<div id="bowlG">
 
<div id="bowl_ringG">
 
<div class="ball_holderG">
 
<div class="ballG">
 
</div>
 
</div>
 
</div>
 
</div>
 

纯CSS制作的网页的loading。

Tag:网页   实例   网页设计   制造     --> [网站建设之]CSS网页设计实例:纯CSS制作的网页的loading


(责任编辑:网站建设)
CSS网页设计实例 纯CSS制作的网页的loading相关文章
上一篇:CSS网页技术基本语法 下一篇:CSS网页设计把HTML标记分类
回到顶部