html结构:

  1. <div class="authority">
  2. <ul>
  3. <li>
  4. <img src="./images/replace/zizhi01.jpg" alt="">
  5. </li>
  6. <li>
  7. <img src="./images/replace/zizhi02.png" alt="">
  8. </li>
  9. <li>
  10. <img src="./images/replace/zizhi03.jpg" alt="">
  11. </li>
  12. <li class="quanwei">
  13. <div>
  14. <img src="./images/replace/zizhi04.jpg" alt="">
  15. </div>
  16. <div>
  17. <img src="./images/replace/zizhi04.jpg" alt="">
  18. </div>
  19. </li>
  20. <li>
  21. <img src="./images/replace/zizhi01.jpg" alt="">
  22. </li>
  23. <li>
  24. <img src="./images/replace/zizhi02.png" alt="">
  25. </li>
  26. <li>
  27. <img src="./images/replace/zizhi03.jpg" alt="">
  28. </li>
  29. <li class="quanwei">
  30. <div>
  31. <img src="./images/replace/zizhi04.jpg" alt="">
  32. </div>
  33. <div>
  34. <img src="./images/replace/zizhi04.jpg" alt="">
  35. </div>
  36. </li>
  37. </ul>
  38. </div>

  

  css

  1. .authority{
  2. width: 100%;
  3. overflow: hidden;
  4. }
  5. .authority ul{
  6. width: 2560px;
  7. animation: gun 10s linear infinite;
  8. }
  9. .authority ul:hover{
  10. animation-play-state: paused;
  11. }
  12. .authority ul>li{
  13. float: left;
  14. height: 448px;
  15. background-size: cover;
  16. }
  17. .authority ul>li img{
  18. width: 320px;
  19. }

  

css动画:

  1. @keyframes gun{
  2. from{
  3. transform: translateX(0px);
  4. }
  5. to{
  6. transform: translateX(-1280px );
  7. }
  8. }

  

css写无缝滚动的更多相关文章

  1. 纯css3代码写无缝滚动效果

    主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...

  2. 利用CSS实现带相同间隔地无缝滚动动画

    说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...

  3. 手写JS无缝滚动插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. 自己写了一个无缝滚动的插件(jQuery)

    效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...

  5. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  6. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  7. JS 阶段小练习~ 无缝滚动

    结合下学了的知识,做个模拟的综合性扩展练习~~  大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...

  8. js原生选项卡(包含无缝滚动轮播图)一

    原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...

  9. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. PID控制算法的C语言实现七 梯形积分的PID控制算法C语言实现

    在PID控制律中积分项的作用是消除余差,为了减小余差,应提高积分项的运算精度,为此,可将矩形积分改为梯形积分. 梯形积分的计算公式为: pid.voltage=pid.Kp*pid.err+index ...

  2. codeforces gym 100952 A B C D E F G H I J

    gym 100952 A #include <iostream> #include<cstdio> #include<cmath> #include<cstr ...

  3. nodejs express框架一个工程中同时使用ejs模版和jade模版

    在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使 ...

  4. nginx如何配置虚拟主机

    server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name local.presion.caomall.ne ...

  5. Linux下如何卸载软件(Debian系)

    说明:此方法适用于Debian.Ubuntu等带apt工具的操作系统. 步骤: 1.首先我们需要知道将要卸载的软件名称,比如我现在打算卸载tightvncserver,但是如果你不确定名称,没关系,可 ...

  6. 将oh-my-zsh编程真正的my zsh

    环境: Ubuntu 32位 oh-my-zsh安装: 1.安装zsh: sudo apt-get install zsh 2.将当前用户的shell环境修改为zsh:  chsh -s /bin/z ...

  7. 利用PhantomJS生成网站截图

    var page = require('webpage').create(); page.open('http://qq.com', function () { page.render('exampl ...

  8. 【CodeForces】889 B. Restoration of string

    [题目]B. Restoration of string [题意]当一个字符串在字符串S中的出现次数不小于任意子串的出现次数时,定义这个字符串是高频字符串.给定n个字符串,求构造出最短的字符串S满足着 ...

  9. wepy开发小程序 大坑....本地调试ok,小程序上传体验版 组件出现问题

    如果你碰到的上述问题(本地调试ok,小程序上传体验版 各种莫名其妙的问题-卡死-组件属性失效-$apply()不起作用) 您需要关闭 微信开发者工具中: 1.微信开发者工具-->项目--> ...

  10. Ajax请求数据与删除数据后刷新页面

    1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...