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. 2017中国大学生程序设计竞赛 - 女生专场 1002 dp

    Building Shops Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  2. 子集系列(一) 传统subset 问题,例 [LeetCode] Subset, Subset II, Bloomberg 的一道面试题

    引言 Coding 问题中有时会出现这样的问题:给定一个集合,求出这个集合所有的子集(所谓子集,就是包含原集合中的一部分元素的集合). 或者求出满足一定要求的子集,比如子集中元素总和为定值,子集元素个 ...

  3. 洛谷 P2345 奶牛集会

    https://www.luogu.org/problem/show?pid=2345 题目描述 约翰的N 头奶牛每年都会参加“哞哞大会”.哞哞大会是奶牛界的盛事.集会上的活动很 多,比如堆干草,跨栅 ...

  4. Emacs ^ Vim

    Emacs存活: http://files.cnblogs.com/files/TheRoadToTheGold/Emacs%E2%80%94%E2%80%94%E5%AD%98%E6%B4%BB.z ...

  5. [译] man 7 pthreads

    NAME      pthreads - POSIX threads   DESCRIPTION      POSIX.1 指定了一组叫做POSIX线程或Pthreads的编程接口(函数,头文件).单 ...

  6. 【BZOJ】2440: [中山市选2011]完全平方数

    [题意]T次询问第k小的非完全平方数倍数的数.T<=50,k<=10^9.(即无平方因子数——素因数指数皆为0或1的数) [算法]数论(莫比乌斯函数) [题解]考虑二分,转化为询问[1,x ...

  7. JavaScript数据类型和转换

    JavaScript数据类型 1.Boolean(布尔) 布尔:(值类型)var b1=true;//布尔类型 2.Number(数字) 数值:(值类型)var n1=3.1415926;//数值类型 ...

  8. [NOIP2003]栈 题解(卡特兰数)

    [NOIP2003]栈 Description 宁宁考虑的是这样一个问题:一个操作数序列,从1,2,一直到n(图示为1到3的情况),栈A的深度大于n. 现在可以进行两种操作: 1.将一个数,从操作数序 ...

  9. 【leetcode 简单】第四十一题 Excel表列序号

    给定一个Excel表格中的列名称,返回其相应的列序号. 例如, A -> 1 B -> 2 C -> 3 ... Z -> 26 AA -> 27 AB -> 28 ...

  10. 利用Addon Domain和A记录使两个域名同时指向同一个网站

    今天碰到这样的需求:已有网站A.com, 以及新注册的域名B.net, 现需要将B.net指向与A.com相同的内容. 这里提出的方法是在空间后台添加Addon domain, 以及在域名B.net后 ...