<!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. 25个App免费资源网站

    不少非常优秀的设计师已经在网络分享了很多出色的图标.界面 PSD 文件,再加上其他一些相关资源,设计 iOS 应用更加方便了. 模板 & PSDs  Icon Template Michael ...

  2. SVN服务器使用（二）

    上篇主要介绍的VisualSVN Server 安装,这篇主要介绍VisualSVN Server 的使用. 首先打开VisualSVN Server Manager,如图: 可以在窗口的右边看到版本 ...

  3. python multiprocessing 多进程

    ''' 如果要启动大量的子进程,可以用进程池的方式批量创建子进程: ''' def test_task(name): print 'Run task %s (%s)...' % (name, os.g ...

  4. EWS小记

    前段时间和同事完成了一个Exchange 2010 OWA的改造版,他狠狠的把网易邮箱抄了一把,而我则狠狠的被EWS坑了一把.今天打开项目粗略看了一下,发现很多东西都有点记不起来了,思细极恐,决定还是 ...

  5. IOS ITunesConnect 修改开发商名称

    ItunesConnect→ManagerApps→应用→Contact Us

  6. 一个字 word 是16位, 一个字由两个字节组成 , 字节=byte ,一个字节8位, 位=bit 如果没有特殊说明kb 就是指 k*bit

    一个字 word 是16位, 一个字由两个字节组成 , 字节=byte,,一个字节8位, 位=bit 如果没有特殊说明kb 就是指 k*bit kbyte= k*byte

  7. SPRING IN ACTION 第4版笔记-第四章ASPECT-ORIENTED SPRING-010-Introduction为类增加新方法@DeclareParents、<aop:declare-parents>

    一. 1.Introduction的作用是给类动态的增加方法 When Spring discovers a bean annotated with @Aspect , it will automat ...

  8. 《深入理解linux内核》第三章 进程

    进程的七种状态 在内核源码的 include/linux/sched.h文件中: task_struct的status可表示 #define TASK_RUNNING 0 #define TASK_I ...

  9. 【HDOJ】2430 Beans

    这题目用线段树超时了,其实也差不多应该超时.10^6大数据量.看了一下网上的解法是单调队列.大概了解了一下,是个挺有意思的数据结构.首先,需要求满足0<=(S[r]-S[l])%p<=k时 ...

  10. 对 Azure Backup 的常见配置问题进行故障排除

    Giridhar Mosay云 + Enterprise 项目经理 这篇博客文章有助于解决 Microsoft云备份解决方案(即 Azure Backup)的常见配置问题.客户通常会在安装或注册 ...