只使用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. [LOJ6569] 仙人掌计数

    Statement 带标号仙人掌计数问题. \(n< 131072\). Solution 设\(x\)个点的仙人掌个数的生成函数为\(C(x)\) 对于与根相邻的块, 还是仙人掌, 生成函数为 ...

  2. 2019-02-13 思考：1000瓶药水，1瓶有毒，老鼠毒发24h，如何用最少的老鼠在24h内找出毒药？

    题目: 现在有1000瓶药水,其中一瓶有毒,一只老鼠喝了在24h后会准时死亡,药水无色无味,如何用最少的老鼠在24h内找出毒药? 分析: 时间限制为24h,说明我们只有一次喂老鼠的机会,需要一波找出来 ...

  3. Pycharm下安装模块

    方法一:使用Pycharm的终端安装 一.网络爬虫 1.安装requests包 作用:简洁且简单的处理HTTP请求的第三方库 网址:https://pypi.org/project/requests/ ...

  4. 域名注册诈骗邮件We are an agency engaging in registering brand name and domain names

    最近收到了一封自称是某公司的邮件,说有人要注册我已经申请的域名,需要我回复确认,看邮件发件人是个人邮箱,通篇没有提到公司,也不是什么正规机构,大概率就是诈骗邮件了. 为了完全确认这封诈骗邮件,我登陆了 ...

  5. 解决Mac上打开txt文件乱码问题

    出处:https://www.jianshu.com/p/f55ddf1e9839 经常会在Mac上打开一个txt文件,发现里面的中文都是乱码,问题是在Windows和手机上看都完全是正常的,这就十分 ...

  6. windows操作系统查看端口，关闭端口进程

    根据端口号查找进程 netstat -ano | findstr "端口号" 杀死进程 taskkill /pid "pid(最后一个数值)" /f

  7. springboot的jar为何能独立运行

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  8. PHP输入流

    PHP输入流php://input,对于这个的官方解释是: php://input可以读取没有处理过的POST数据.相较于$HTTP_RAW_POST_DATA而言,它给内存带来的压力较小,并且不需要 ...

  9. 看看有哪些 Web 攻击技术.

    一.前言 HTTP 协议具有无状态.不连接.尽最大努力的特点,对于 Web 网站的攻击基本也是针对 HTTP 协议的这些特点进行的.比如无状态的特点,就要求开发者需要自行设计开发"认证&qu ...

  10. java语言进阶（四）_Map_斗地主案例

    第一章 Map集合 1.1 概述 现实生活中常会看到这样的一种集合:IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种一一对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种 ...