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

猪儿不懒

UI设计 前端开发 HTML5+CSS3

 
 
 

日志

 
 

CSS3SlidingImagePanels效果  

2012-03-21 23:21:44|  分类: 设计教程与素材 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 CSS3SlidingImagePanels效果 - zzpdownload - 猪儿不懒
 

制作:懒猪儿(猪儿不懒)

源文件下载(新浪微盘)

因为这只是简单的练习 ,请注意只写了WEBKIT内核浏览器兼容,其他浏览器未写!

原文是国外的,我换了电脑地址找不到了。等找到后再补上来吧。

我也只列出比较重要的代码对其说明,大家最好下载源文件后再对着教程上的重点来研究。

注意:此教程不是入门教程,对CSS3不太熟悉的朋友请自己看一下CSS3选择器、动画、渐变、rbga 

首先思路不难,就是利用层叠加和移动,使用CSS3完成动画效果。

先看HTML部分:
 <div class="all-img">      
            <div>
            <span></span>
                <span></span>
                <span></span>
              <span></span>
        </div>
        <div>
            <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
        <div>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
     </div>
我们有四张图片,所以用了四个div 然后每个DIV里都有四个span。

也许,看到这里,并不懂得为要这么写。

不要管,继续看CSS
.all-img div{
width:150px;
height:100%;
float:left;
position:relative;
overflow:hidden;
}
.all-img div span{
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:-150px;
z-index:2;
-webkit-transition: left 0.5s ease-in-out;
}
这样,我们就把DIV排好了。然后span都重叠在一起。

.all-img div span:nth-child(1){
background-image:url(../images/1.jpg);
}
.all-img div span:nth-child(2){
background-image:url(../images/2.jpg);
}
.all-img div span:nth-child(3){
background-image:url(../images/3.jpg);
}
.all-img div span:nth-child(4){
background-image:url(../images/4.jpg);
}
.all-img  div:nth-child(1) span{
background-position: 0px 0px;
}
.all-img div:nth-child(2) span{
background-position: -150px 0px;
}
.all-img div:nth-child(3) span{
background-position: -300px 0px;
}
.all-img div:nth-child(4) span{
background-position: -450px 0px;
}
这个不难,设置背景,但是大家一定要理清楚这里的逻辑。

.wapper input:checked ~ .all-img div span{
-webkit-animation: slideOut 0.6s ease-in-out;
/*所有span标签都就用slideOut这个动画*/
}
@-webkit-keyframes slideOut{
0%{ left:0px; }
100%{ left:150px;}
}
.child1:checked ~ .all-img div span:nth-child(1),
.child2:checked ~ .all-img div span:nth-child(2),
.child3:checked ~ .all-img div span:nth-child(3),
.child4:checked ~ .all-img div span:nth-child(4){
-webkit-animation: none;/*当前选中项使用transition动画,而不使用animation动画*/
left:0px;
z-index:10;
}

以上代码就可以达到效果了,接下来,我们再做点小小的优化,给按钮加个样式,图片之间使用线隔一下
.wapper label:before{
content:'';
width: 34px;
height: 34px;
background: rgba(130,195,217,0.9);
position: absolute;
left: 50%;
margin-left: -17px;
border-radius: 50%;
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
z-index:-1;
}/*加样式*/
.wapper label:after{
content:"";
width:1px;
height:400px;
background: -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
position:absolute;
right:0;
bottom:-20px;
}/*加线*/
.wapper .lab-child4:after{
width:0;
}/*最后一个label标签后不要线*/
以上代码是完成这个效果的主要代码,我们可以改一下动画属性,可以得到其他效果!
  评论这张
 
阅读(134)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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