html结构:

<div class="authority">
<ul>
<li>
<img src="./images/replace/zizhi01.jpg" alt="">
</li>
<li>
<img src="./images/replace/zizhi02.png" alt="">
</li>
<li>
<img src="./images/replace/zizhi03.jpg" alt="">
</li>
<li class="quanwei">
<div>
<img src="./images/replace/zizhi04.jpg" alt="">
</div>
<div>
<img src="./images/replace/zizhi04.jpg" alt="">
</div>
</li>
<li>
<img src="./images/replace/zizhi01.jpg" alt="">
</li>
<li>
<img src="./images/replace/zizhi02.png" alt="">
</li>
<li>
<img src="./images/replace/zizhi03.jpg" alt="">
</li>
<li class="quanwei">
<div>
<img src="./images/replace/zizhi04.jpg" alt="">
</div>
<div>
<img src="./images/replace/zizhi04.jpg" alt="">
</div>
</li>
</ul>
</div>

  

  css

 .authority{
width: 100%;
overflow: hidden;
}
.authority ul{
width: 2560px;
animation: gun 10s linear infinite;
}
.authority ul:hover{
animation-play-state: paused;
}
.authority ul>li{
float: left;
height: 448px;
background-size: cover;
}
.authority ul>li img{
width: 320px;
}

  

css动画:

@keyframes gun{
from{
transform: translateX(0px);
}
to{
transform: translateX(-1280px );
}
}

  

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. Codeforces Round #405 (rated, Div. 2, based on VK Cup 2017 Round 1)A B C 水 并查集 思路

    A. Bear and Big Brother time limit per test 1 second memory limit per test 256 megabytes input stand ...

  2. AES和RSA混合加密技术在网络数据传输中的应用

    原文:http://www.fx361.com/page/2017/0110/519967.shtml          摘要:文章通过分析和比较AES加密算法和RsA加密算法的实现过程和各自的特点, ...

  3. eclipse/myeclipse添加插件3种方式

    个人比较偏爱links的方式,以下方式eclipse/myeclipse均适合 1.links方式 在eclipse目录先新建links目录,新建一个xx.link(例如:android.link) ...

  4. C/C++预处理宏的总结

    1.定义顺序的无关性 #define PI 3.14 #define TWO_PI  2*PI 这两句谁前谁后无所谓,因为预处理器不断迭代来实现宏替换,直到源文件中没有宏了才停止. 2. 宏变量变成字 ...

  5. libuv在mingw下编译

    libuv是一个基于事件的异步IO库,来自node.js项目. libuv提供了Makefile.mingw,供MingW编译,由其中的规则我们可以得到一下编译步骤: cd libuv/src gcc ...

  6. HTML常用标签-手打抄录-来自-烟雨飘零-拜谢

    HTML常用标签及其全称 <a href="#">a 超级链接(anchor)</a>    <abbr title="abbreviati ...

  7. UVA 12520 Square Garden

    https://vjudge.net/problem/UVA-12520 题意:n*n网格中染色m个格子,染色格子的最长轮廓线 贪心 将格子分为4类 1.隔一个选一个,互不相邻的格子 2.4个角上的格 ...

  8. 课程设计——利用信号量实现哲学家进餐问题(JAVA)

    package cn.Douzi.PhiEat; /** * 表示筷子的类 */ public class Chopstick{ /** * 表示筷子是否可用 */ private volatile ...

  9. 【BZOJ 1001】[BJOI2006]狼抓兔子(最大流)

    题目链接 最大流裸题,没什么好说吧,恰好点数多,考验网络流的效率,正好练\(Dinic\). #include <cstdio> #include <queue> #inclu ...

  10. jQuery domready

    在jQuery里面,我们可以看到两种写法: $(function(){ //todo }) $(document).ready(function(){ //todo }) 这两个方法的效果都是一样的, ...