我们先通过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. [Usaco2018 Open]Talent Show

    Description FarmerJohn要带着他的N头奶牛,方便起见编号为1-N,到农业展览会上去,参加每年的达牛秀!他的第i头奶牛重量为wi,才艺水平为ti,两者都是整数.在到达时,Farmer ...

  2. 51nod1298 圆与三角形

    1298 圆与三角形 题目来源: HackerRank 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出圆的圆心和半径,以及三角形的三个顶点,问圆同三 ...

  3. 图论 HDOJ 5348 MZL's endless loop

    题目传送门 /* 题意:给一个n个点,m条边的无向图,要求给m条边定方向,使得每个定点的出入度之差的绝对值小于等于1. 输出任意一种结果 图论:一个图,必定存在偶数个奇度顶点.那么从一个奇度定点深搜, ...

  4. 410 Split Array Largest Sum 分割数组的最大值

    给定一个非负整数数组和一个整数 m,你需要将这个数组分成 m 个非空的连续子数组.设计一个算法使得这 m 个子数组各自和的最大值最小.注意:数组长度 n 满足以下条件:    1 ≤ n ≤ 1000 ...

  5. 全面学习ORACLE Scheduler特性(6)设置Repeat Interval参数

    3.3 设置Repeat Interval Job 和Schedule中REPEAT_INTERVAL参数都是用来控制执行的频率或周期,虽然说周期是一个时间性概念,不过REPEAT_INTERVAL指 ...

  6. 242 Valid Anagram 有效的字母异位词

    给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的一个字母异位词.例如,s = "anagram",t = "nagaram",返回 true ...

  7. python实现qq机器人qqbot

    title: python实现qq机器人qqbot tags: python date: 2018-6-1 10:19:00 --- 以下内容为转载 一.介绍 qqbot 是一个用 python 实现 ...

  8. SpringBoot中如何使用jpa和jpa的相关知识总结

    jpa常用的注解: 注解 解释 @Entity 声明类为实体或表. @Table 声明表名. @Basic 指定非约束明确的各个字段. @Embedded 指定类或它的值是一个可嵌入的类的实例的实体的 ...

  9. 少啰嗦！一分钟带你读懂Java的NIO和经典IO的区别

    1.引言 很多初涉网络编程的程序员,在研究Java NIO(即异步IO)和经典IO(也就是常说的阻塞式IO)的API时,很快就会发现一个问题:我什么时候应该使用经典IO,什么时候应该使用NIO? 在本 ...

  10. CAD得到ImageMark数据（com接口VB语言）

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...