<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin:0;

            padding:0;

        }

        ul {

            ist-style:none;

        }

        #wrap {

            width:600px;

            height:400px;

            margin:30px auto;

            border:1px solid #9cc5ef;

            overflow:hidden;

        }

        #slider {

            width:300%;

            height:100%;

            font:100px/400px Microsoft Yahei;

            text-align:center;

            color:#fff;

            margin-left:0;

            -webkit-animation:slide1 10s linear infinite;

        }

        #slider li {

            float:left;

            width:600px;

            height:100%;

        }

        #slider li:nth-child(1) {

            background:#6bacef;

        }

        #slider li:nth-child(2) {

            background:#297cd3;

        }

        #slider li:nth-child(3) {

            background:#01254a;

        }

        /*创建三种动画策略*/

        @-webkit-keyframes slide1 {

            0% { margin-left:0;}

            23% { margin-left:0;}

            33% { margin-left:-600px;}

            56% { margin-left:-600px;}

            66% { margin-left:-1200px;}

            90% { margin-left:-1200px;}

            100% {margin-left:0;}

        }

    </style>

</head>

<body>

<div id="wrap">

    <ul id="slider">

        <li>1</li>

        <li>2</li>

        <li>3</li>

    </ul>

</div>

</body>

</html>

CSS实现简易的轮播图的更多相关文章

  1. html、css、js实现轮播图

    2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...

  2. 告别组件之教你使用原生js和css写移动端轮播图

    在工作中由于项目需要要写一个轮播图,本想使用组件直接调用实现快速开发,但是一想到自己经常使用组件但是让自己手写的话确实一点都不会. 一个不会手写组件的前端程序员不是一个好程序员!于是打算自己手写一个. ...

  3. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  4. 纯CSS实现轮播图效果，你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  5. Vue(小案例_vue+axios仿手机app)_首页（底部导航栏+轮播图+九宫格）

    ---恢复内容开始--- 一.前言                        1.底部导航(两种做法)                                         2.轮播图 ...

  6. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. CSS3,3D效果轮播图

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

  8. 简单的 js手写轮播图

    html: <div class="na1">   <div class="pp">    <div class="na ...

  9. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

随机推荐

  1. 广义线性模型(GLM, Generalized Linear Model)

    引言:通过高斯模型得到最小二乘法(线性回归),即:      通过伯努利模型得到逻辑回归,即:      这些模型都可以通过广义线性模型得到.广义线性模型是把自变量的线性预测函数当作因变量的估计值.在 ...

  2. "应用程序无法正常启动(0xc000007b)。请单击 确定 关闭应用程序。"解决方法

    完成一小项目,正常运行,测试环境有Windows XP,Win 7,Win X64及有SP的版本,也是我客户端可能用到的系统版本,Win8和Win10未测试 但在分发过程中,发现有的机器可以正常运行, ...

  3. 【洛谷P1196】[NOI2002]银河英雄传说

    银河英雄传说 题目链接 并查集时记录下以i为首的队列的长度(如果存在这个队列)num[i],便于合并, 和点i到队首的距离front[i],便于查询(在find时维护) #include<ios ...

  4. WebClient设置Expect: 100-continue

    今天使用WebClient进行post发送数据的时候.总是无响应.实在没办法了.只好用fiddler抓包看一看.自己构造请求看哪里有问题. 发现请求头加上这句话后就无响应了.Expect: 100-c ...

  5. jmeter 填写URL链接后 不能有多余的空格。

  6. 牛B的swift屏幕旋转经验终结者（OC统一思路）

    牛B的swift屏幕旋转经验终结者(OC统一思路) 1.AppDelegate (1)定义变量 var blockRotation: Bool = false (2)定义方法 Swift代码 func ...

  7. django-单表操作

    #######单表操作######## 前面视图层,模板层.路由层都写了大概,项目肯定是会和数据库打交道,那就讲讲orm的单表查询吧,直接写过一点点,不太全面. 1.项目刚创建好,我们需要在setti ...

  8. Vue--- VueX组件间通信链接（共有方法放入了扩展目录store里面） 1.2

    Vuex结构图再仔细看 Vuex原理: 就是  把共有属性放入到一个公共的地方,进行使用 多组件共享状态, 之前操作方式,由父组件传递到各个子组件. 当路由等加入后,会变得复杂. 引入viewx 解决 ...

  9. 20181009noip HZ EZ两校联考sum（莫队，组合数学）

    题面戳这里 思路: noip考莫队???!!! 考场上死活没往这方面想啊!!!数据分治忘写endl50pts滚粗了 这里每个询问都有n,m两个参数 我们可以把它看做常规莫队中的l和r 然后利用组合数的 ...

  10. Win10 VirtualBox虚拟机搭建lnmp环境

    之前用的是vagrant+VirtualBox搭建的环境,因为是windows系统动不动就报错,打不开环境,所以还是老老实实换了虚拟机哎.... 版本: VirtualBox 5.1.34   xsh ...