<!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. 带节假日JS万年历控件代码

    <form name="CLD" class="content"> <table width="100%" border= ...

  2. [BZOJ 2212] [Poi2011] Tree Rotations 【线段树合并】

    题目链接:BZOJ - 2212 题目分析 子树 x 内的逆序对个数为 :x 左子树内的逆序对个数 + x 右子树内的逆序对个数 + 跨越 x 左子树与右子树的逆序对. 左右子树内部的逆序对与是否交换 ...

  3. shell中的内建命令, 函数和外部命令

    转自shell中的内建命令, 函数和外部命令 Shell识别三种基本命令:内建命令.Shell函数以及外部命令: (1)内建命令就是由Shell本身所执行的命令.    有些命令是由于其必要性才内建的 ...

  4. Unity3d 调用C++的DLL

    原地址:http://www.cnblogs.com/alongu3d/archive/2013/04/20/3031904.html Unity 3D 调用DLL的方法 本文转载:渡蓝的博客园 ht ...

  5. cocos-html5 Json 灵活 遍历方式 不同方式的缺陷，优点总结

    1,四种解析Json的方式:Part 1 var list1 = [1,3,4]; alert(list1[1]); var list2 = [{"name":"leam ...

  6. ASP.NET MVC 入门介绍 (上)

    MVC模式 MVC模式是一种软件架构模式.它把软件系统分为三个部分:模型(Model),视图(View)和控制器(Controller).MVC模式最早由Trygve Reenskaug在1974年提 ...

  7. javaweb学习总结(四十一)——Apache的DBUtils框架学习

    一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...

  8. 坚果云创业团队访谈：我们 DIY 云存储（不要过度关注竞争对手，尤其当我们还是小公司的时候）

    坚果云(http://jianguoyun.com/)是一款用于多平台文件同步.备份和交换的云存储工具,立志于提供“便捷,安全”的服务.坚果云自去年年初启动内测,至今年三月初刚刚正式发布.近日我们拜访 ...

  9. HTTP访问控制(CORS)

    跨站 HTTP 请求(Cross-site HTTP request)是指发起请求的资源所在域不同于该请求所指向资源所在的域的 HTTP请求.比如说,域名A(http://domaina.exampl ...

  10. leetcode面试准备:Kth Largest Element in an Array

    leetcode面试准备:Kth Largest Element in an Array 1 题目 Find the kth largest element in an unsorted array. ...