CSS3实现轮播图主要是由css:background-position和css3:animation实现。且实现此轮播需要一张四个图横着相连的图片。

注(Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。)

HTML:

 <div class="slide-box"></div>

CSS:

<style>
@-webkit-keyframes slide {
0% {
background-position: 0 0;
}
10%, 25% {
background-position: -600px 0;
}
35%, 50% {
background-position: -1200px 0;
}
60%, 75% {
background-position: -1800px 0;
}
85%, 100% {
background-position: 0 0;
}
}
@-moz-keyframes slide {
0% {
background-position: 0 0;
}
10%, 25% {
background-position: -600px 0;
}
35%, 50% {
background-position: -1200px 0;
}
60%, 75% {
background-position: -1800px 0;
}
85%, 100% {
background-position: 0 0;
}
}
@-o-keyframes slide {
0% {
background-position: 0 0;
}
10%, 25% {
background-position: -600px 0;
}
35%, 50% {
background-position: -1200px 0;
}
60%, 75% {
background-position: -1800px 0;
}
85%, 100% {
background-position: 0 0;
}
}
@keyframes slide {
0% {
background-position: 0 0;
}
10%, 25% {
background-position: -600px 0;
}
35%, 50% {
background-position: -1200px 0;
}
60%, 75% {
background-position: -1800px 0;
}
85%, 100% {
background-position: 0 0;
}
}
.slide-box {
margin: 0 auto;
width: 600px;
height: 400px;
border: 1px solid #ddd;
background: url(http://sandbox.runjs.cn/uploads/rs/376/uazzmdfd/bg.png) 0 0 no-repeat;
-webkit-animation: slide 8s linear infinite;
-o-animation: slide 8s linear infinite;
animation: slide 8s linear infinite;
}
</style>

animation 属性是一个简写属性,JavaScript 语法: object.style.animation=" slide 8s linear infinite",其参数如下:

 animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction

规定是否应该轮流反向播放动画。

让图片在8秒内进行位移,每次向左移动600px,最后回到原点,div宽600px,刚好容下一个图,这样就构成了轮播效果。

CSS3实现轮播图效果的更多相关文章

  1. CSS3实现轮播图效果2

    先前用CSS3做了一个一张图片实现的轮播,但是这样的图片很难找,于是又改进了一下. HTML: <div class="box"> <ul> <li& ...

  2. css3百叶窗轮播图效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  4. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. 纯CSS3实现轮播图

    前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...

  6. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  7. css3实现轮播图

    css3动画属性简写: animation: name  duration  timing-function  delay  iteration-count  direction  fill-mode ...

  8. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  9. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

随机推荐

  1. by which, in which, from which 语法区别

    (1)Here is Beijing,where I grow up.where其实也是指代北京,不过where是在北京的意思,也就是 in Beijing (2)Here is Beijing,in ...

  2. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. ecmall数据字典

    ecm_acategory //文章分类表 字段 类型 Null 默认 注释 cate_id int(10) 否 自增ID号,分类ID号 cate_name varchar(100) 否 分类的名称 ...

  4. Net文章汇总帖

    DevExpress:Data Grid ExamplesHow to: Initialize Cells in Newly Created RowsHow to: Set a Cell Value ...

  5. 巧用Freemarker的自定义方法

    要想使用Freemarker支持的自定义方法,需要实现freemarker.template.TemplateMethodModel接口,然后将方法对象放入到Freemarker的数据模型中,这样在f ...

  6. Library Cache: Lock, Pin and Load Lock

    What is "Library cache lock" ? This event controls the concurrency between clients of the ...

  7. locals()函数访问当前还在作用范围内的局部变量

    >>> element = 'silver' >>> number = 47 >>> 'Element {number} is {element} ...

  8. HTTP 500 的解决方案

    我们首先要确定IIS权限的问题,如下所示: 身份验证的具体项: 身份验证的基本设置: 注意:如果不需要Form验证的情况下,那么把Form身份验证禁止掉,否则会出现在每一次请求的过程中都要有一个默认的 ...

  9. fill的用法

    for(int i=0;i<=10;i++) num[i]=i ; fill(num+1,num+1+5,2) ; for(int i=0;i<=10;i++) printf(" ...

  10. 【Flex教程】#009 As/typeof /instanceof /is的作用

    “as” :主要用它做类型转化 假设有一个类叫做Class1,我们声明了一个它的对象 c1,如果想要将它转换成Class2类型,只要这样写: Class2(c1); AS3 中的操作符: as 实现就 ...