<!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. SQL 返回数量一定的行

    1. 限制返回的行 select top 10 * from tablename 2. 返回随机n行 select top n * from tablename order by newid()

  2. python 操作sqlite数据库

    '''SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说 没有独立的维护进程,所有的维护都来自于程序本身. 在python中,使用sqlite3创建数据库的连接,当我们指定的数据库文件不 ...

  3. asp.net中对象的序列化，方便网络传输

    对象序列化 是将对象状态转换为可保持或传输的格式的过程.反序列化 是将流转换为对象序列化和反序列化相结合 可以使对象数据轻松的存储和传递 在 .NET 中,如果是对象可序列化,需要在 声明对象的开始部 ...

  4. ECSHOP安装或使用中提示Strict Standards: Non-static method cls_image:

    随着ECSHOP的不断发展,越来越多的人成为了ECSHOP的忠实粉丝.由于每个人的服务器环境和配置都不完全相同,所以ECSHOP也接二连三的爆出了各种各样的错误信息.相信不少新手朋友在ECSHOP安装 ...

  5. Windows Phone 8 开发环境搭建

    原地址:http://blog.csdn.net/md521/article/details/11015139 Windows Phone 8将采用与Windows 8相同的NT内核,这就意味着WP8 ...

  6. easyui源码翻译1.32--Window（窗口）

    前言 扩展自$.fn.panel.defaults.使用$.fn.window.defaults重写默认值对象.下载该插件翻译源码 窗口控件是一个浮动和可拖拽的面板可以用作应用程序窗口.默认情况下,窗 ...

  7. 安装Ubuntu服务器

    安装edX首先需要一台linux或Mac系统的电脑/服务器. 这里以常见的Ubuntu作为服务器系统. Ubuntu的官方网站为http://www.ubuntu.com,中文网站为http://ht ...

  8. 用APP赚钱(转)

    英文原文:MAKING MONEY ON APPS 做为半个 iOS 开发的一家公司,我时不时地考虑如何用 APP 赚钱.最近由Brent Simmons 和 Jared Sinclair 的文章挑起 ...

  9. ActionBar官方教程(3)更改标题处的图片

    Using a logo instead of an icon By default, the system uses your application icon in the action bar, ...

  10. mac 修改密码后 频繁输入钥匙串问题修复方法

    就一句话就是 清空钥匙串缓存 下面是具体方法 进入硬盘目录-->资源库-->Keychains 删除里面的文件夹(这个文件夹里面有 keychain-2.db keychain-2.db- ...