我们先通过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. 发生在升级OS X Yosemite后：修复各种开发环境

    本博文最初发布于我的个人博客<Jerry的乐园> 终于还是忍不住升级了,促使我升级的原动力居然是Alfred的Yosemite theme居然比初始theme好看很多!在升级前就预想到我的 ...

  2. Spring:(三) --常见数据源及声明式事务配置

    Spring自带了一组数据访问框架,集成了多种数据访问技术.无论我们是直接通过 JDBC 还是像Hibernate或Mybatis那样的框架实现数据持久化,Spring都可以为我们消除持久化代码中那些 ...

  3. [ SDOI 2006 ] 保安站岗

    \(\\\) Description 给出一棵 \(n\) 个节点以 \(1\) 为根的树,一个节点的覆盖半径是 \(1\) ,点有点权 \(val_x\) . 选择一些点,使得点权和最小,同时每个节 ...

  4. Python基础：基本数据类型

    python基本标准6类数据类型:Number数字, String字符串, List列表,Tuple元组,Set集合,Dictionary字典 不可变数据3个(Number数字,String字符串,T ...

  5. (求助)对某一颜色，设置透明度 alpha 后，其他使用该颜色的地方 受到影响！！！！原因未知

    对某一颜色,设置透明度 alpha 后,其他使用该颜色的地方 受到影响!!!!原因未知,有谁碰到过这样的问题?????? 测试了以下三款手机,结果如下: 1.android 4.4.2: 不受影响 2 ...

  6. Verification Mind Games---how to think like a verifier像验证工程师一样思考

    1. 有效的验证需要验证工程师使用不同于设计者的思维方式思考问题.具体来说,验证更加关心在严格遵循协议的基础上发现设计里面的bug,搜索corner cases,对设计的不一致要保持零容忍的态度. m ...

  7. ARP劫持处理指令集

    第一组(据传xp有效,未实验) arp -a arp -d arp -s IP地址 MAC地址 第二组(windows2008R2有效,已实验) netsh i i show in (记住其中本地连接 ...

  8. 主库binlog（master-log）与从库relay-log的关系

    主库binlog: # at # :: server id end_log_pos CRC32 COMMIT/*!*/; # at # :: server id end_log_pos CRC32 e ...

  9. Linux服务器文件权限被改

    阿里云买的ubuntu服务器遭受了不明攻击,导致站点访问不了,折腾了很久,才发现是文件的权限被修改了.然后就是一点点的修改,很是麻烦.服务器的安全要重视呢! 1.修改权限 chmod 755 * -R ...

  10. 用 Systemtap 统计 TCP 连接

    转自: https://mp.weixin.qq.com/s?__biz=MzIxMjAzMDA1MQ==&mid=2648946009&idx=1&sn=3a0be2fe4f ...