我们先通过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. 拦截机制中Aspect、ControllerAdvice、Interceptor、Fliter之间的区别详解

    Spring中的拦截机制,如果出现异常的话,异常的顺序是从里面到外面一步一步的进行处理,如果到了最外层都没有进行处理的话,就会由tomcat容器抛出异常. 1.过滤器:Filter :可以获得Http ...

  2. ACM_发工资（简单贪心）

    发工资咯: Time Limit: 2000/1000ms (Java/Others) Problem Description: 作为广财大的老师,最盼望的日子就是每月的8号了,因为这一天是发工资的日 ...

  3. ActiveMQ应用

    一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...

  4. 基于Web的Kafka管理器工具之Kafka-manager启动时出现Exception in thread "main" java.lang.UnsupportedClassVersionError错误解决办法（图文详解）

    不多说,直接上干货! 前期博客 基于Web的Kafka管理器工具之Kafka-manager的编译部署详细安装 (支持kafka0.8.0.9和0.10以后版本)(图文详解)   问题详情 我在Kaf ...

  5. MSSQLServer知识点总结:DDL(create,alter,drop,declare)-未完整

    一.开发环境 Window10 二.开发工具 SQLServer2012 三.数据库的操作 1.创建 (1)方式一:使用默认的配置信息 create database T_mydb2 (2)方式二:自 ...

  6. log4j2异步日志解读（一）AsyncAppender

    log4j.logback.log4j2 历史和关系,我们就在这里不展开讲了.直接上干货,log4j2突出于其他日志的优势,异步日志实现. 看一个东西,首先看官网文档 ,因为前面文章已经讲解了disr ...

  7. SQL生僻字模糊查询

    生僻字指在数据库默认的编码中不存 又称难字或冷僻字 一.SQL中解决生僻字录入乱码问题[调整列数据类型->由varchar改为NVARCHAR]

  8. Microsoft SQL Server学习（四）--约束

    SQLServer - 约束 主要是为了保证数据库中的数据一致性.有效性.准确性, 从而提高了数据库中数据的正确性 一.约束的分类 在SQLserver中,约束分三种不同类型 1.实体约束 实提约束是 ...

  9. mongo 3.4分片集群系列之六：详解配置数据库

    这个系列大致想跟大家分享以下篇章: 1.mongo 3.4分片集群系列之一:浅谈分片集群 2.mongo 3.4分片集群系列之二:搭建分片集群--哈希分片 3.mongo 3.4分片集群系列之三:搭建 ...

  10. Codeforces_765_D. Artsem and Saunders_(数学)

    D. Artsem and Saunders time limit per test 2 seconds memory limit per test 512 megabytes input stand ...