我们先通过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. [Offer收割]编程练习赛84 -- 括号序列

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含'(', ')'和''的字符串S,现在小Hi可以任意指定''为'('或')',不同的'*'可以是不同的字符. ...

  2. [译]libcurl错误码

    CURLcode Almost all "easy" interface functions return a CURLcode error code. No matter wha ...

  3. Generating RSA keys in PKCS#1 format in Java--转

    原文地址:https://stackoverflow.com/questions/7611383/generating-rsa-keys-in-pkcs1-format-in-java When I ...

  4. NPOI 导出Excel 2007, 2013问题

    NPOI默认有两个命名空间HSSF为Excel 2003 版本,若导出2007 及以上后缀名打开excel 则会报错,NPOI也提供了一个07及以上的版本空间XSSF,具体操作列下: NPOI.XSS ...

  5. js解析地址栏参数

    /** * 获取地址栏中url后面拼接的参数 * eg: * 浏览器地址栏中的地址:http://1.1.1.1/test.html?owner=2db08226-e2fa-426c-91a1-66e ...

  6. 记一个java.lang.NoClassDefFoundError的问题

    如题,即找不到对应class,出现这个问题,很可能是文件路径配置错误,也可能是jar包丢失. 比如我今天遇到的问题,就是IDEA没有把mybatis的jar包复制到编译目录造成的.

  7. Java编程思想读书笔记_第三章

    本章提到的关于==的部分,一个完整的实验如下: class Test { public static void main(String[] args) { Integer i = new Intege ...

  8. C++中图片重命名

    非常简单的小程序,满足自己的需求. #include <iostream> #include <fstream> #include<sstream> using n ...

  9. 树莓派GPIO点亮第一个led

    代码如下: 注意:::::此时的GPIO口为18编号口而非GPIO18 import RPi.GPIO as GPIO //引入函数库 import time RPi.GPIO.setmode(GPI ...

  10. 安装ipython notebook及基本命令（快捷键）

    转载自:http://121.42.47.99/yuenshome/wordpress/?p=2622 目前基本上是Pycharm和ipython notebook结合起来做东西,ipython no ...