只使用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. FR6安装问题备注

    好久以前偶尔用用FR,采用安装执行文件的方式(5.3版安装没问题).及其编译包的方式都没有问题,最近在6.x提示如下(fr6_5_11_all_ent等),不知是系统原因还是文件问题,未解: ---- ...

  2. 面向对象存储框架：Obase快速入门

    在项目中完成对象建模后,可以使用Obase来进行对象的管理(例如对象持久化),本篇教程将创建一个.NET Core控制台应用,来展示Obase的配置和对象的增删改查操作.本篇教程旨在指引简单入门. 本 ...

  3. MFC的Spin Control基础控件的使用

    1.向GUI界面添加一个MFC 提供的Spin数值调节控件 2.设置其"伙伴“,并设置数值调节的范围 3.如何让数值显示在文本框中?你可以有多种选择:可以让文本框控件绑定一个数值类型的变量: ...

  4. 2.WebPack初始化

    一.Package.json 在项目中输入: npm init 之后会提示你一步一步输入信息,我输入的信息如下: 生成的Package.json文件如下 我们也可以在初始时省略这些步骤,让脚本使用默认 ...

  5. 4、struct2的支持团队开发

    在一个大型的项目中,不同的人都开发不同的模块,不能所有的人都去操作同一个struct.xml文件,我们应该对于不同的模块对应不同的配置文件 列如我们对应的登陆模块,我们可以编写一个登陆的配置文件 1. ...

  6. Django的F查询和Q查询,事务,ORM执行原生SQL

    F查询和Q查询,事务及其他   F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个我们自己设定的常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django ...

  7. Shell 脚本学习(1)

    一 Shell概览 1. 自动化批量系统初始化程序(update, 软件安装,时区设置,安全策略,...) 2. 自动化批量软件部署程序(LAMP,LNMP,Tomcat,LVS,Nginx) 3. ...

  8. python高阶-Linux基础命令集

    声明: 1)仅作为个人学习,如有冒犯,告知速删! 2)不想误导,如有错误,不吝指教! 1: 查看文件信息:ls ls常用参数: 参数 含义 -a 显示指定目录下所有子目录与文件,包括隐藏文件 -l 以 ...

  9. Matlab矩阵间快速赋值方法

    目前还没见到网上用过这个简单的方式 A= [1 2 3; 4 5 6; 7 8 9] B = zeros(5,5) B(1:3, 2:4) = A     %将A赋值到B的第1行到3行,第2列岛4列, ...

  10. 【经验】GaussDB(for MySQL)性能优化 —— 日志的“快递驿站”

    GaussDB(for MySQL)数据库在写入性能上,在业界同类产品中是最好的,这主要得益于GaussDB(for MySQL)在MySQL内核方面的诸多优化.其中有一项从“送快递”得来灵感的优化— ...