注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

前端攻城师 郭培的博客

Be the best you can

 
 
 

日志

 
 
关于我

前端技术:http://hszy00232.blog.163.com/ 前端设计:http://blog.sina.com.cn/hsjs00232 职业:web前端工程师 现居地:北京 My QQ:365246295 Mail:hszy00232@163.com

网易考拉推荐

【译】CSS3效果 -- css3 fade slider  

2012-06-27 18:51:21|  分类: html5+css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
效果:http://jsfiddle.net/hszy00232/TYE5m/
HTML:

<body>
<header>
<div class="header">
<h2>CSS3 Fade slider</h2>
<a href="#" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</div>
</header>
<div class="container">
<div class="slides">
<ul>
<li>
<img src="images/pic1.jpg" alt="image01" />
<div>Promo text #1</div>
</li>
<li>
<img src="images/pic2.jpg" alt="image02" />
<div>Promo text #2</div>
</li>
<li>
<img src="images/pic3.jpg" alt="image03" />
<div>Promo text #3</div>
</li>
<li>
<img src="images/pic4.jpg" alt="image04" />
<div>Promo text #4</div>
</li>
</ul>
</div>
</div>
</body>


CSS:

*{margin:0;padding:0;}
body{font:14px/1.3 Arial,sans-serif;}
ul,li{list-style:none;}
.header{display:block;width:100%;height:70px;color:#fff;position:relative;background-color:#212121;box-shadow:0 -1px 2px #111;}
.header h2{position:absolute;width:540px;padding:22px 0;font-size:22px;font-weight:normal;left:50%;margin-left:-400px;}
.header a.stuts,
.header a.stuts:visited{position:absolute;top:0;left:50%;margin:23px 0 0 110px;font-size:14px;line-height:31px;color:#fcfcfc;text-decoration:none;}

.container{width:900px;padding:15px;margin:30px auto;background-color:#eee;border-radius:5px;}

@-webkit-keyframes anim_slides{
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100%{opacity:0;}
}
@-moz-keyframes anim_slides{
0% {opacity:0;}
6% {opacity:1;}
24% {opacity:1;}
30% {opacity:0;}
100%{opacity:0;}
}
@-webkit-keyframes anim_titles{
0% {left:100%;opacity:0;}
5% {left:10%;opacity:1;}
10% {left:10%;opacity:1;}
25% {left:100%;opacity:0;}
100%{left:100%;opacity:0;}
}
@-moz-keyframes anim_titles{
0% {left:100%;opacity:0;}
5% {left:10%;opacity:1;}
10% {left:10%;opacity:1;}
25% {left:100%;opacity:0;}
100%{left:100%;opacity:0;}
}
.slides{position:relative;width:900px;height:300px;overflow:hidden;}
.slides ul{position:relative;}
.slides ul li{position:absolute;top:0;opacity:0;
-webkit-animation-name:anim_slides;
-webkit-animation-duration:24.0s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;

-moz-animation-name:anim_slides;
-moz-animation-duration:24.0s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-animation-play-state:running;
-moz-animation-fill-mode:forwards;
}
.slides ul li:nth-child(2),
.slides ul li:nth-child(2) div{
-webkit-animation-delay:6.0s;
}
.slides ul li:nth-child(3),
.slides ul li:nth-child(3) div{
-webkit-animation-delay:12.0s;
}
.slides ul li:nth-child(4),
.slides ul li:nth-child(4) div{
-webkit-animation-delay:18.0s;
}
.slides ul li img{display:block;}
.slides ul li div{position:absolute;left:10%;top:50%;width:200px;background-color:#000;color:#fff;font-size:26px;padding:20px;border-radius:10px;box-shadow:0 0 5px #fff inset;
-webkit-animation-name:anim_titles;
-webkit-animation-duration:24.0s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:0;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:normal;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;

-moz-animation-name:anim_titles;
-moz-animation-duration:24.0s;
-moz-animation-timing-function:linear;
-moz-animation-delay:0;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:normal;
-moz-animation-play-state:running;
-moz-animation-fill-mode:forwards;
}

个人分析:
1.animation(动画)是一个复合属性。
  语法:
  animation:name | duration | timing-function | delay | iteration-count | direction 
  写法:
  Andrioid Browser | iOS Safari | Safari | Chrome : -webkit-animation
  Firefox:-moz-animation
  IE:-ms-animation
  W3C:animation
    取值:
animation-name:检索或设置对象所应用的动画名称,这个属性的使用必须结合@keyframes一起使用
   animation-duration:检索或设置对象动画的持续时间
   animation-timing-function:检索或设置对象动画的过渡类型
   animation-delay:检索或设置对象动画的循环次数
     animation-direction:检索或设置对象动画在循环中是否反向运动
     相关属性:
   animation-play-state: running | paused,检索或设置对象动画的状态
           animation-fill-mode:none|backwards|forwards|both,检索或设置对象动画开始之前和结束之后的行为
  评论这张
 
阅读(949)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017