超酷的CSS3幻灯片效果

时间:2020-6-27 作者:admin

超酷的CSS3幻灯片效果

对于css3的喜爱可谓日渐增加,无奈自己很忙,没有多少时间来研究,这段时间也做了很多这方面的项目,比如类似于QQ 的IM沟通工具界面,比如新的博客界面,比如这个css 幻灯片演示(拿来的)。

如果让我来做这个幻灯片的效果,我想可能跟这个不太一样,至少我是没有用到这种transform: translateY(430px); 、transform: translateX(-310px); 和transition-delay: 0.4s;

好久没有动手写css3的效果了,都有些不记得,回归了之前写过的文章,一起来看看这位同学的特效是怎么炼出来的.transform, transition, animate

先说一下幻灯片是怎么弄出来的。之前我在微博上也发过一个手风琴的案例,跟这个幻灯片也是用的同样的原来。查看手风琴演示

这个案例里面我们使用到的技术就是第二种了。但它使用的却不是这种简单的display:none和display:block的方式,而是使用了css3的另外一个属性就是,

二、移动translate

移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动),具体使用方法如下:
transform:translate(100px,20px):

超酷的CSS3幻灯片效果

transform:translateX(100px):

超酷的CSS3幻灯片效果

transform:translateY(20px):

超酷的CSS3幻灯片效果

目的就是保持跟我们平时制作幻灯片滚动的做法类似,我们都是通过定义一个里面的盒子向左浮动,然后外面的盒子隐藏,通过js来控制里面的盒子自动滚动和点击的时候滚动。

#slider{width:3832px;transition:0.6s cubic-bezier(0.77,0,0.175,1)}
.slide{width:958px;height:470px;float:left}
#trigger1:checked ~ #wrapper #slider{transform:translateX(0px)}
#trigger2:checked ~ #wrapper #slider{transform:translateX(-958px)}
#trigger3:checked ~ #wrapper #slider{transform:translateX(-1916px)}
#trigger4:checked ~ #wrapper #slider{transform:translateX(-2874px)}

至于第一屏的移动上去的菜单效果很炫,同样是用到了,translateX(-310px),然后显示这个隐藏的盒子,移动菜单上面的链接逐步出来则是用到了

.scroll{width:620px;height:430px;transition:0.3s ease-in-out;transform:translateX(0px)}
.left{width:310px;height:430px;background:#9bd0d5;float:left}
.right{width:310px;height:310px;padding-top:120px;font-size:15px;line-height:2;background:#e0613f;float:left}
.right a{opacity:0;display:block;padding-left:20px;color:#f9edd0;transition:transform 0.3s,opacity 0.3s;transform:translate(-10px,5px)}
.right a:hover{background:#555555}
.right a:nth-of-type(1){transition-delay:0.4s}
.right a:nth-of-type(2){transition-delay:0.5s}
.right a:nth-of-type(3){transition-delay:0.6s}
.right a:nth-of-type(4){transition-delay:0.7s}
.right a:nth-of-type(5){transition-delay:0.8s}

每一个的子节点对应于一个transition-delay,逐步增加,形成了链接逐步出来的效果。

这个css3幻灯片真的是超赞的,我很喜欢。如果能够让他自动一直自动滚动就好了,应该有办法吧。

去看看这个作者的网站吧

演示  css3小游戏演示

,, 推荐文章

  • css3动画属性animation

    在前面已经学习过了css3中的transition(css3动画属性)、transform(css3变形属性)。今天来学习另外一个css3动画属性animation,这个是不是跟我们jQuery中的animate很相似呢? 我们也知道tra …

  • 超赞的CSS3动画下拉菜单

    今天分享几个最近看到的比较实用的css3带动画的下拉菜单效果,实现出来的效果跟使用jQuery的slideDown和fadeIn有得一比,效果非常赞,本人推荐各位以后可以使用下面的几种效果,一定会给你的前端开发带来不少亮点的。如果需要更多效 …

  • 纯CSS3制作TAB选项卡的两种方式

    css tab,纯CSS3制作tab,不用JavaScript就可以制作选项卡是不是很神奇,而且效果跟不适用jQuery是一个样的,本站独创的CSS3 Tab绝对让你眼前一亮。

  • CSS3仿手机客户端展开和关闭菜单动画效果

    在手机客户端上,我们常常会发现有很多这样子的效果,点击某个按钮,左边隐藏的菜单会出现,内容则被折开。类似于下面这样子。 然后点击菜单跳转之后左边的菜单子弹自动收起来。或者再次点击上面的按钮,同样左边收起来,内容就完整显示了。 这个在web页 …

  • 不容错过的移动前端页面制作技巧

    一般人不会说出来的移动前端动画技巧,文章来自“TQ的独立博客:玩转HTML5移动页面”,在这篇教程你会发现许多非常有用的动画处理技巧,细心点还会发现许多有用的zepto插件,例如:zepto.onepagescroll.js、zepto-touch.js、weixinshare.js,以下为原文。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。