我们先通过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. 二分搜索 POJ 1064 Cable master

    题目传送门 /* 题意:n条绳子问切割k条长度相等的最长长度 二分搜索:搜索长度,判断能否有k条长度相等的绳子 */ #include <cstdio> #include <algo ...

  2. Flume中的flume-env.sh和log4j.properties配置调整建议（图文详解）

    GC是内存的回收的意思. Flume中的flume-env.sh配置调整建议 [hadoop@master conf_HostInterceptor]$ pwd /home/hadoop/app/fl ...

  3. 从实际案例聊聊Java应用的GC优化--转

    https://tech.meituan.com/jvm_optimize.html 当Java程序性能达不到既定目标,且其他优化手段都已经穷尽时,通常需要调整垃圾回收器来进一步提高性能,称为GC优化 ...

  4. 2559. [NOIP2016]组合数问题

    [题目描述] [输入格式] 从文件中读入数据. 第一行有两个整数t, k,其中t代表该测试点总共有多少组测试数据,k的意义见[问题描述]. 接下来t行每行两个整数n, m,其中n, m的意义见[问题描 ...

  5. http请求和响应头部

    说一说常见的请求头和响应头都有什么呢? 1)请求(客户端->服务端[request])     GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1 ...

  6. LR接口测试---webservices

    //================================================================================== /* //事务开始 lr_st ...

  7. Spinner实现列表下拉功能

    public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener { ...

  8. 面试中的一些小问题之html5和html4的区别？

    HTML5建立的一些新规则: 新特性应该基于HTML.CSS.DOM.JavaScript: 减少对外部插件的需求,如flash将会用video标签和audio标签代替: 更加优秀的错误处理: 更多取 ...

  9. 循环插入记录,id每次加1

    sql语句写法: begin for i in 1 .. 100 loop insert into table_name values(....); end loop; commit; end; 例子 ...

  10. CUDA 显存操作：CUDA支持的C++11

    CUDA9的编译器和语言改进 使用CUDA 9,nvcc编译器增加了对C ++ 14的支持,其中包括新功能 通用的lambda表达式,其中使用auto关键字代替参数类型; auto lambda = ...