<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. VMWARE下CentOS7虚拟机网络配置

    注:本文仅针对新装的虚拟机,#ip addr 获取不到ip信息,无法连接网络的情况提供一种参考解决方案. 1.左上角点击“编辑”->“虚拟网络编辑器”.新建一个NAT模式的网络. 2.配置虚拟机 ...

  2. idea原生ajax数据处理(增删改查)

    项目名称:Bookstore UI界面 项目文件 操作: jsp代码 <%@ page import="dao.BookDAO" %> <%@ page impo ...

  3. qbxt Day 5 图论一些基础知识

    就是一些感觉比较容易忘的知识 假设根为第0层, 在二叉树的i层上至多有2i个结点,整颗二叉树(深度为k)最多有\(2^{k+1}-1\)个节点 对于任何一棵非空二叉树,如果叶结点个数为\(n_0\), ...

  4. 【题解】洛谷P2607【ZJOI2008】骑士

    洛谷P2607:https://www.luogu.org/problemnew/show/P2607 一道毒瘤的环基树问题 第一次做环基树的题目 刚看题目的时候觉得不就是跟没有上司的舞会一样嘛 然后 ...

  5. Visual Studio 2015 Tools for Unity安装

    https://blogs.msdn.microsoft.com/visualstudio/tag/visual-studio-tools-for-unity/ 下载对应的VS版本 里边可以找到下载地 ...

  6. o'Reill的SVG精髓（第二版）学习笔记——第十一章

    第十一章:滤镜 11.1滤镜的工作原理 当SVG阅读器程序处理一个图形对象时,它会将对象呈现在位图输出设备上:在某一时刻,阅读器程序会把对象的描述信息转换为一组对应的像素,然后呈现在输出设备上.例如我 ...

  7. 2017-09-26 发布 SpringBoot多模块项目实践（Multi-Module）

    https://segmentfault.com/a/1190000011367492?utm_source=tag-newest 2017-09-26 发布 SpringBoot多模块项目实践(Mu ...

  8. 微信小程序学习笔记（一）

    1.目录及文件构成 1.1 根目录下 ** app.js 是小程序的脚本代码,用来监听并处理小程序的生命周期函数.声明全局变量. ** app.json 是对整个小程序的全局配置,配置小程序是由哪些页 ...

  9. Vue+Electron实现简单桌面应用

    之前一直使用C#编写桌面应用,也顺带写一些Web端应用.最近在看node时发现常用的vscode是用electron编写的,一种想吃螃蟹的念头就涌了上来. 在网上找了找electron的资料,也研究了 ...

  10. iOS 开发中保留小数问题

    保留两位小数(四舍五入) - (void)viewDidLoad { [super viewDidLoad]; // 有时候我们需要对数据保留两位小数,而且需要四舍五入,并且需要把末尾多余的0给去掉\ ...