• Hello!欢迎来到网页设计学!
当前位置: 首页 > HTML&CSS > 用css3和jQuery制作内容展示幻灯片

用css3和jQuery制作内容展示幻灯片

.................................................................................................................................................................

网站首页中经常会用到幻灯片,用flash来制作相当简单,但是flash在网站应用中有很多缺点,不建议使用,除了flash我们还可以用css3实现动画效果,今天介绍给大家的幻灯片充分利用了视差原理,当你点击上一页和下一页按钮时时,图片和文字会相应左右滑动,背景也会左右移动,非常有视觉冲击力,用它来做图片、产品展示是个非常不错的选择。效果图如下:

slide

资源下载地址:幻灯片download

如果你想自己制作独特的幻灯片可以学学css3中的 animation动画。

原理:

在 CSS3 中创建动画,先要了解 @keyframes 规则,我们把keyframes叫做“关键帧”,接触过flash的朋友可能对这个东西并不会陌生,首先要将动画与 div 元素绑定,否则不会产生动画效果。

例如:

.one{

      animation: first 2s ease 1s both;

}

@keyframes first{

    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}

animition语法为:animation:name    duration   timing-function   delay   iteration-count   direction;

animation有6个属性,分别为

animation-name   规定需要绑定到选择器的 keyframe 名称

animation-duration  规定完成动画所花费的时间

animation-timing-function  规定动画的运动方式

animation-delay  规定在动画开始之前的延迟

animation-iteration-count  规定动画应该播放的次数

animation-direction  规定是否应该轮流反向播放动画

animation-fill-mode  检索或设置对象动画时间之外的状态

例如:

.da-slide-fromright h2{

    animation: fromRightAnim1 0.6s ease-in 0.8s both;
}

@keyframes fromRightAnim1{

    0%{ left: 110%; opacity: 0; }
    100%{ left: 10%; opacity: 1; }
}

这段代码表示:h2标题在0.8秒以后从页面左边110%的位置移动到10%的位置,透明度从0到1,运行时间为0.6秒。

虽然我们可以用纯css3制作动画,但是如果要对动画进行控制,还是需要用到js,例如点击按钮开始播放。

本文链接:用css3和jQuery制作内容展示幻灯片

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:网页设计学,不可只有文字没有链接,请尊重他人的劳动成果!否则我们将追究其责任。

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!


...........................................................................................................................................................

相关文章

发表评论

友情链接:

  • 网页设计

专业网页设计师交流平台 设计交流QQ群: 网页设计交流