<!DOCTYPE html>

<html>

<head>

<title>CSS3最简洁的轮播图</title>

<style>

*{margin:0;padding:0;}

.ckl{

   margin:50px auto;

   overflow:hidden;

   height:300px;

   width:700px;

   position:relative;

}

ul{

   list-style:none;

   height:300px;

   width:2800px;

   position:absolute;

  animation: myfirst 20s ease-out infinite alternate;

    -webkit-animation: myfirst 20s ease-out infinite alternate; /* Safari 与 Chrome */

}

ul img{

   width:700px;

   height:300px;

}

.ckl ul li{

   float:left;

   height:300px;

   width:700px;

}

@keyframes myfirst

{

        0%,25% {        left: 0px;       }

        30%,50% {       left: -700px;    }

        55%,75% {       left: -1400px;    }

        80%,100% {      left: -2100px;    }

}

</style>

</head>

<body>

<div class="ckl">

 <ul>

  <li><img src="https://cdn.pixabay.com/photo/2016/11/13/12/52/kuala-lumpur-1820944_960_720.jpg"></li>

  <li><img src="https://cdn.pixabay.com/photo/2014/07/21/18/31/kuala-lumpur-398792_960_720.jpg"></li>

  <li><img src="https://cdn.pixabay.com/photo/2015/08/28/08/06/malaysia-911580_960_720.jpg"></li>

  <li><img src="https://cdn.pixabay.com/photo/2012/02/28/00/39/sunset-17665_960_720.jpg"></li>

 </ul>

</div>

</body>

</html>

CSS3最简洁的轮播图的更多相关文章

  1. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. css3+JS实现幻灯片轮播图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. CSS3实现轮播图效果

    CSS3实现轮播图主要是由css:background-position和css3:animation实现.且实现此轮播需要一张四个图横着相连的图片. 注(Internet Explorer 10.F ...

  4. 纯CSS3实现轮播图

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

  5. CSS3——animation的基础（轮播图）

    作为前端刚入门的小菜鸟,只想记录一下每天的小收获 对于animation动画 1.实现动画效果的组成: (1)通过类似Flash的关键帧来声明一个动画 (2)在animation属性中调用关键帧声明的 ...

  6. 纯CSS3轮播图

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  8. css3实现轮播图

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

  9. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

随机推荐

  1. DB天气app冲刺第八天

    ---恢复内容开始--- 今天已经是第八天了冲刺,本来今天的ui设计已经基本成型了,今天下午设计什么的都弄好了,然后自己手贱clean了一下,可能是自己的程序的bug吧,调试没有错误,安装在模拟器上以 ...

  2. matlab高斯模板生成，K是归一化系数，上面是一个半径200的高斯模板用来做MSR

    R3=; F=zeros(*R3+,*R3+); sigma=R3/; r=; :*R3+     :*R3+         r=(x-R3)*(x-R3)+(y-R3)*(y-R3);       ...

  3. Tesseract 3.02中文字库训练

    Tesseract 3.02中文字库训练 下载chi_sim.traindata字库下载tesseract-ocr-setup-3.02.02.exe 下载jTessBoxEditor用于修改box文 ...

  4. Tesseract——OCR图像识别 入门篇

    Tesseract——OCR图像识别 入门篇 最近给了我一个任务,让我研究图像识别,从我们项目的screenshot中识别文字信息,so我开始了学习,与大家分享下. 我看到目前OCR技术有很多,最主要 ...

  5. NSBundle的使用，注意mainBundle和Custom Bundle的区别

    1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...

  6. 严重: The web application [] registered the JDBC driver 错误

    近日发现启动tomcat的时候报如下警告: -- :: org.apache.catalina.loader.WebappClassLoader clearReferencesJdbc 严重: The ...

  7. js构造函数

    使用函数做自动化 function createObj(nick, age){ var obj = { nick: nick, age: age, printName: function(){ con ...

  8. SQLite入门与分析(九)---VACUUM命令分析

    VACUUM命令是SQLite的一个扩展功能,模仿PostgreSQL中的相同命令而来.若调用VACUUM带一个表名或索引名, 则将整理该表或索引.在SQLite 1.0中,VACUUM命令调用 gd ...

  9. file_operations结构2

    对与应用层的每个系统调用,驱动程序都有一个与之对应的函数.对于字符设备驱动程序,这些函数集合在一个file_operations类型的数据结构中,该结构体在Linux内核的include/linux/ ...

  10. 【PythonChallenge】Level 3

    题目为正则表达式,需要注意EXACTLY的含义,即AAAAxBBB中x不满足条件,但aAAAxBBBa却满足条件.使用perl解决此题,利用s///替换字母,循环读取整个源码文件,结果为linkedl ...