只使用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. Arduino + RFID 读取 IC 卡 Arduino uno中获得RFID的UID 并通过串口转发RFID卡号

    RFID简介:射频识别即RFID(Radio Frequency IDentification)技术,又称无线射频识别,是一种通信技术,可通过无线电讯号识别特定目标并读写相关数据,而无需识别系统与特定 ...

  2. 简易的phpexcel导出柱状图

      首先得把phpexcel扩展的源码拷贝到项目文件下 下面是代码   /** 引入最重要的PHPExcel类库的入口文件 */ require(STK_PATH.'/class/stk/PHPExc ...

  3. cb38a_c++_STL_算法_transform

    cb38a_c++_STL_算法_transformtransform()算法有两种形式:transform(b1,e1,b2,op);//b1(源区间)的数据通过op函数处理,存放在b2(目标区间) ...

  4. 常见CSS选择器的权重和优先级

    一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a. ...

  5. node.js 安装方法 以及 用原声搭建服务器

    node.js 安装方法: 第一步: 64位的安装包网址:   https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi 第二步: 进入命令提示框  输入 ...

  6. java多线程并发执行demo，主线程阻塞

    其中有四个知识点我单独罗列了出来,属于多线程编程中需要知道的知识: 知识点1:X,T为泛型,为什么要用泛型,泛型和Object的区别请看:https://www.cnblogs.com/xiaoxio ...

  7. c++数字转化为字符串、字符串转换为数字

    char ch[20]; int i =1; int j = 2; char *p = "34567"; 数字装换为字符串 sprintf(ch , "%d,%d&quo ...

  8. Python分析最近大火的网剧《隐秘的角落》，看看网友们有什么看法

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 估计最近很火的连续剧<隐秘的角落>大家趁着端午假期都看过了吧? ...

  9. java重试

    项目中有很多需要重试的场景,而每次都得写如下的逻辑 for (int i=0;i++;i<retry){ try{ do(//逻辑代码); if(success){ break; } }catc ...

  10. Mybatis架构相关的知识

    如上所示,这是一个简单的Mybaits执行流程. 我们其实可以看到,一直到第三步(Sqlsession)那么一步,这都是我们的程序里需要创建的.而之后的步骤才是底层完成的任务. 这里就有了一个引申的概 ...