我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。

  <!DOCTYPE html>

 <html>

  <head>

          <meta charset="UTF-8">

          <title>滚动播放</title>

      </head>

      <body>

          <div>

              <img class="c1" src="img/banner_3.jpg"/>

              <img class="c2"src="img/banner_3.jpg"/>

          </div>

      </body>

 </html>

接下来就是重点，css给内部添加样式

 <style type="text/css">

         *{

             margin: 0px;

             padding: 0px;

         }

         div{

             overflow: hidden;

             width: 1500px;

             height: 400px;

             margin: auto;

             position: absolute;

             top: 0px;

             left: 0px;

             right: 0px;

             bottom: 0px;

         }

         img{

             width: 100%;

             height: 100%;

             position: absolute;

             animation-iteration-count: infinite;

             animation-timing-function: linear;

             animation-duration: 15s;

         }

         .c1{

             animation-name: roll1;

         }

         .c2{

             animation-name: roll2;

         }

         @keyframes roll1{

             0%{left: 0px; top: 0px;}

             100%{left: 100%; top: 0px;}

         }

         @keyframes roll2{

             0%{left: -100%; top: 0px;}

             100%{left: 0px; top: 0px;}

         }

         </style>

可以看到，在内部我使用了动画的效果，使两张图片在不停移动，创造一种只有一张图片不断循环的效果。

并且我将图片的宽高都设为100%，使其铺满整个div，这样就可以方便我们调整大小，而且使不同的图片都可以循环，而不留空。

最后div盒子的位置也可以根据我们自己的需要调整，在我的代码中我为方便观看效果，将其设在网页中心。

html+css使图片在页面中循环滚动的更多相关文章

  1. JavaScript中让Html页面中循环播放文字

    JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...

  2. css 使图片水平垂直居中

    1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...

  3. 【CSS】如何在一个页面中引入样式css

    CSS(Cascading Style Sheet)又叫层叠样式表.是我们学习前端必不可少的一门语言,学习它其实就是为了学会如何去更改页面标签的样式.目前使用最广的是css3,但同样的,他是从css2 ...

  4. 两种方法实现用CSS切割图片只取图片中一部分

    切割图片这里不是真正的切割,只是用CSS取图片中的一部分而已,主要有两种方式,一是做为某一元素的背景图片,二是用img元素的属性.下面有个不错的示例,大家可以参考下 切割图片这里不是真正的切割,只是用 ...

  5. 纯css实现图片或者页面变灰色

    前言 今天是个沉痛的日子,全国哀悼英雄,各大平台平日鲜丽的界面置纷纷换成了灰色,以表对逝者的安息与尊敬!!对付疫病,我没多大的本事,只能记录一点点知识来提升自己擅长的技术,待到将来能为国家尽一份绵薄之 ...

  6. CSS使图片变灰

    为了悼念,各大网站都纷纷将自己的站点颜色调灰,就连图片也一样,到底如何实现的呢,请看下面的代码. 〈img src="http://hovertree.com/hvtimg/201512/f ...

  7. css使图片变成黑白效果

    -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...

  8. 用CSS使图片上下左右都绝对居中于DIV

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. css 使图片紧贴底部显示

    img{ display: table-cell; vertical-align: bottom; }

随机推荐

  1. [TYVJ1391]走廊泼水节

    Description 话说,中中带领的OIER们打算举行一次冬季泼水节,当然这是要秘密进行的,绝对不可以让中中知道.不过中中可是老江湖了,当然很快就发现了我们的小阴谋,于是他准备好水枪迫不及待的想要 ...

  2. C#和C++的区别（一）

    C#特性 1.指针可以有++.--运算,引用不可以运算: 2.类或结构的默认访问类型是internal 类的所有成员,默认是private 3.属性:用于定义一些命名特性,通过它来读取和写入相关的特性 ...

  3. 二分搜索 POJ 3258 River Hopscotch

    题目传送门 /* 二分:搜索距离,判断时距离小于d的石头拿掉 */ #include <cstdio> #include <algorithm> #include <cs ...

  4. 【[转】MySql模糊查询

    转自:http://chenpeng.info/html/2020 MySQL提供标准的SQL模式匹配,以及一种基于象Unix实用程序如vi.grep和sed的扩展正则表达式模式匹配的格式. 一.SQ ...

  5. sublime 3 最新注册码

    http://9iphp.com/web/html/sublime-text-3-license-key.html

  6. HTML城市联动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 北工大2017校赛 1101:要打车的FanZzz

    题目链接: http://bjutacm.openjudge.cn/lianxi/1101/ 思路: 二分 + 二分图最大匹配. 开始的时候我想直接用最小费用流模型,后来发现这样是错误的.因为这道题实 ...

  8. 使用QTP录制自带Flight小实例

    1.双击打开QTP10.0,启动过程中测试类型选择“WEB”. 2.进入主界面,New——Test,新建一个测试用例. 3.点击Record按钮,Record and settings对话框中,可以选 ...

  9. centos上安装supervisor来管理dotnetcore等应用程序

    supervisor 介绍: 这是一款用python编写的进程管理工具,可以守护他管理的所有进程,防止异常退出,以及提供一个可视化的web界面来手动管理,打开关闭重启各种应用,界面如下: 关于在cen ...

  10. RabbitMQ - Publisher的消息确认机制

    queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consumer处理呢?毕竟对于 ...