只使用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. Backup Database pubs to Disk='D:\DataSQL\pubs.bak' --->动态备份所有数据库

    备份数据库 在项目实施时,备份恢复数据库还是有必要的,自动或傻瓜式的操作比较方便,未测试,失业了,现在静不下心来,有机会要求再做这类操作时实现它,此处先收藏备用 /* <Dynamic SQL ...

  2. Arduino连接LCD1602显示屏

    简介 LCD1602是一种工业字符型液晶,能够同时显示16x02即32个字符.LCD1602液晶显示的原理是利用液晶的物理特性,通过电压对其显示区域进行控制,即可以显示出图形.[百度百科] 引脚说明 ...

  3. [Cadence] 10个Cadence AD PADS经典案例 2-12层板设计

    [Cadence] 10个Cadence Allegro经典案例 2-12层板设计 自己保存的PCB例程资料分享 Allegro AD PADS看下面截图需要的拿去 下载链接 链接: https:// ...

  4. 在android项目中使用FontAwesome字体

    在android项目中使用FontAweSome图标集,可以方便的适配各种屏幕分辨率,不必在各种不同分辨率文件夹中新建资源文件.使用字体是一种很巧妙的方法,把图像以字体的方式呈现,这样以前设置为and ...

  5. idea安装docker插件

    Preferences->Plugins 根据上图安装docker插件,安装完成后可使用idea来管理docker项目了.docker运行项目请参加"Docker开发环境搭建" ...

  6. JAVA相关基础知识

    JAVA相关基础知识 1.面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分, ...

  7. java-IO流(commons-io-2.6)使用教程

    工具库下载: https://pan.baidu.com/s/1tXXF4zjIfJ9ouObsU5RTpA  提取码:214v 1.打开IDEA 2.在模块下新建个lib文件夹将框架复制进去 3.点 ...

  8. Git报错信息

    1. 解决办法: 当在最后提交的时候,出现的错误. 解决办法: git remote rm origin 执行下面代码: git remote add origin https://github.co ...

  9. 入门大数据---Hbase容灾与备份

    一.前言 本文主要介绍 Hbase 常用的三种简单的容灾备份方案,即CopyTable.Export/Import.Snapshot.分别介绍如下: 二.CopyTable 2.1 简介 CopyTa ...

  10. shell把字符串中的字母去掉,只保留数字

    1 编辑测试文件 [root@hz-kvm cephdisk3]# cat > 1.txt <<EOF> 120Tib> EOF 2 显示文件[root@hz-kvm c ...