只使用css实现轮播图简单的操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <title>Document</title>

     <style>

         * {

             margin:;

             padding:;

         }

         ul,

         ol {

             list-style: none;

         }

         .box {

             overflow: hidden;

             position: relative;

             width: 520px;

             height: 280px;

             margin: 100px auto;

         }

         ul {

             height: 100%;

             width: 2080px;

             animation: move 20s infinite;

             animation-timing-function: cubic-bezier(0, 1, 0, 0.99);

             animation-delay: 2s;

         }

         li {

             float: left;

         }

         @keyframes move {

             0% {

                 transform: translateX(0px);

             }

             25% {

                 transform: translateX(-520px);

             }

             50% {

                 transform: translateX(-1040px);

             }

             75% {

                 transform: translateX(-1560px);

             }

             /* 100% {

                 transform: translateX(-2080px);

             } */

         }

         ol {

             position: absolute;

             left: 50%;

             bottom: 12px;

             transform: translateX(-50%);

             width: 70px;

             height: 13px;

             text-align: center;

             background-color: rgba(255, 255, 255, .6);

             border-radius: 7px;

         }

         ol li {

             float: left;

             width: 8px;

             height: 8px;

             background-color: #fff;

             margin: 2.5px 3px;

             border-radius: 50%;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <ul>

             <li>

                 <a href="#">

                     <img src="upload/轮1.jpg" alt="">

                 </a>

             </li>

             <li>

                 <a href="#">

                     <img src="upload/轮2.jpg" alt="">

                 </a>

             </li>

             <li>

                 <a href="#">

                     <img src="upload/3.jpg" alt="">

                 </a>

             </li>

             <li>

                 <a href="#">

                     <img src="upload/4.jpg" alt="">

                 </a>

             </li>

         </ul>

         <ol>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

             <li></li>

         </ol>

     </div>

 </body>

 </html>

纯 CSS 实现滑动轮播图效果的更多相关文章

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

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

  2. 纯CSS手动滑动轮播图（隐藏滚动条）

    HTML: <div class="bigder"> <div class="big"> <dl> <dt>&l ...

  3. 拓展-教你手把手用纯CSS写轮播图

    先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...

  4. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  5. 纯css实现轮播图

    轮播图的实现原理其实是比较简单的 举个例子 <div class="main"> <div class="div-main"></ ...

  6. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  7. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  8. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  9. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

随机推荐

  1. nodejs使用redis实现单例锁

    一个while(true)下使用redis的setnx命令,创建一个唯一标识,在操作执行完后,删除这个标识. 注意resource_name用一个常量,而my_random_value使用一个随机值. ...

  2. 2019-02-03 线性表的顺序储存结构C语言实现

    #include<cstdio> #define MAXSIZE 20 typedef int Elemtype; //Elemtype类型根据实际情况而定,这里取int typedef ...

  3. MDX

    简介 把md文件里的图片转成base64,方便发给别人和上传博客园等博客平台 初衷 用Typora写markdown的感觉很爽,但是每当我写好一篇文章,想要发给小伙伴们炫耀炫耀,或者上传博客园,CSD ...

  4. 黎活明8天快速掌握android视频教程--12_文件的保存与读取

    1.当前是把文件保存当前手机的app的data目录下 我们来看看操作保存文件的业务类 package contract.test.savafileapplication; import android ...

  5. java 中的 自定义viewUtils框架

    在前面学习的基础上,我们自己编写一个ViewUtils注解框架类,不清楚的原理看前面的源代码 package im.weiyuan.com.viewutils; import android.supp ...

  6. CentOS 7 下安装 MySQL 8.0

    前言 本篇文章主要介绍在 CentOS 7 环境下安装 MySQL 8.0. 正文 1. 配置yum源 首先在 https://dev.mysql.com/downloads/repo/yum/ 找到 ...

  7. 入门大数据---Sqoop简介与安装

    一.Sqoop 简介 Sqoop 是一个常用的数据迁移工具,主要用于在不同存储系统之间实现数据的导入与导出: 导入数据:从 MySQL,Oracle 等关系型数据库中导入数据到 HDFS.Hive.H ...

  8. 《Java并发编程之美》

    简介 码云笔记 java-concurrent/TheBeautyOfConcurrentProgram

  9. docker推送镜像到私有仓库

    配置私有仓库源 私有仓库地址:registry.supos.ai 修改/etc/docker/daemon.json文件,增加insecure-registries,如下所示: { "ins ...

  10. Jquery中$(document).ready()

    window.onload = function(){ alert("welcome"); } 语句的作用是希望在页面加载完,自动执行定义js代码(function). $(doc ...