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 #427 (Div. 2) D dp

    D. Palindromic characteristics time limit per test 3 seconds memory limit per test 256 megabytes inp ...

  2. TC规则

    633人阅读   TC规则涉及到 队列(QUEUE) 分类器(CLASS) 过滤器(FILTER),filter划分的标志位可用U32或iptables的set-mark来实现 ) 一般是" ...

  3. 基于javaWeb阶段下的Servlet总结

    1. Servlet概述   Servlet是用Java语言编写的服务端的程序,采用request--response模式提供Web服务,并且支持标准ServletAPI,Servlet就一个运行在w ...

  4. 「LibreOJ β Round #4」求和

    https://loj.ac/problem/528 1            ,  d =1 μ(d)=   (-1)^k   ,  d=p1*p2*p3*^pk  pi为素数 0         ...

  5. Codeforces 221 C. Little Elephant and Problem

    C. Little Elephant and Problem time limit per test 2 seconds memory limit per test 256 megabytes inp ...

  6. CF767 C.Garland DFS

    LINK 题意:给定一棵树,每个节点拥有权值,问能否找到两个点,断开它们与父节点的边能使树分成权值和相等的三部分.权值可以为负 思路:进行两遍DFS,第一遍找最深的子树和为sum/3的节点,标记掉找到 ...

  7. [Luogu 1967] NOIP2013 货车运输

    [Luogu 1967] NOIP2013 货车运输 一年多前令我十分头大的老题终于可以随手切掉了- 然而我这码风又变毒瘤了,我也很绝望. 看着一年前不带类不加空格不空行的清纯码风啊,时光也好像回去了 ...

  8. How To Build Compelling Stories From Your Data Sets

    How To Build Compelling Stories From Your Data Sets Every number has a story. As a data scientist, y ...

  9. JVM学习二:JVM之类加载器之加载分析

    前面一遍,我们对类的加载有了一个整体的认识,而这一节我们细节分析一下类加载器的第一步,即:加载. 一.概念 类的加载指的是将类的.class文件中的二进制数据读入到内存中,将其放在运行时数据区的方法区 ...

  10. 【leetcode 简单】第三十二题 买卖股票的最佳时机Ⅱ

    给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你可以尽可能地完成更多的交易(多次买卖一支股票). 注意:你不能同时参与多笔交易(你必须在再次 ...