<!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. final, finally 和finalize的区别

    final 修饰符(关键字) 如果一个类被声明为final,意味着它不能再派生新的子类,不能作为父类被继承.因此一个类不能及被声明为abstract,又被声明为final的.将变量或方法声明为fina ...

  2. 看看baidu是如何AJAX跨域的[转]

    看看baidu是如何AJAX跨域的 最近做个人网站遇到AJAX跨子域名的问题. 偶尔看到baidu的通行证处理都是在二级域名passport.baidu.com中处理的, 但是baidu很多地方登录都 ...

  3. XSS之学习误区分析

    有段时间没写东西了, 最近看到zone里出现了很多“XSS怎么绕过某某符号的帖子”,觉得很多新手在寻找XSS时走进了一些误区,比如:专门想着怎么去“绕过”.这里做个总结,希望对大家有所帮助. 1. 误 ...

  4. 一个C语言宏展开问题

    转自一个C语言宏展开问题 一个令人比较迷惑的问题,学C语言好多年,今天终于搞明白,记之. ------------------------------------------------------- ...

  5. 《暗黑世界》安卓APK 编译流程详细说明教程！（图文）

    原地址:http://bbs.gameres.com/forum.php?mod=viewthread&tid=223671 关于开发环境的搭建,之前的相关文档已经很详细的说明,对环境的搭建请 ...

  6. C#语法中一个问号（？）和两个问号(??)的运算符是什么意思？

    (1).C#语法中一个个问号(?)的运算符是指:可以为 null 的类型. MSDN上面的解释: 在处理数据库和其他包含不可赋值的元素的数据类型时,将 null 赋值给数值类型或布尔型以及日期类型的功 ...

  7. JavaScript 判断是否为undefined

    if (typeof(reValue) == "undefined") {    alert("undefined"); }

  8. 使用Timer执行定时任务

    一.Timer概述 在Java开发中,会碰到一些需要定时或者延时执行某些任务的需求,这时,我们可以使用Java中的Timer类实现. 二.Timer介绍 Timer是一个定时器类,通过该类可以为指定的 ...

  9. matlab 画图

    先前讲解了简单绘图方法: http://www.cnblogs.com/youxin/p/3859923.html x = 0:pi/100:2*pi; y = sin(x); plot(x,y)下面 ...

  10. 公司的SVN服务器改变了IP地址，请问以前下载的代码如何同步，

    工作根目录上 右键->TortoiseSVN->Relocate,修改URL 更新前先备份!