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. 题解【bzoj3529 [SDOI2014]数表】

    Description \(T\) 组询问,定义 \(F(n)=\sum\limits_{d|n}d\).每次给出 \(n,m,a\) 求 \[\sum\limits_{i=1,j=1,F(\gcd( ...

  2. 给阿里云ECS主机添加IPV6地址

    阿里云公开的CentOS镜像将IPv6支持给去掉了,需要加载相关模块.通过HE的tunnelbroker开启IPv6隧道使国内VPS支持IPv6地址.   1. vim /etc/modprobe.d ...

  3. nginx如何配置虚拟主机

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

  4. width: calc(100% - 20px);

    width: calc(100% - 20px); css3 的 calc()函数.这里的意思是设置宽度比100%的宽度少20px. calc()函数用于动态计算长度值. calc()函数支持 &qu ...

  5. c语言时间计算

    C语言使用time_t结构体表示时间戳,它本质上是个long类型. 我们可以使用如下函数获取当前时间的时间戳: time_t time(time_t* timer) 函数功能:得到从标准计时点(一般是 ...

  6. checkbox选择根据后台List数据进行回显

    需求:记住用户已经选择的 checkbox 选项,当用户再次对该 checkbox 进行选择操作时,应对该用户已经选择的 checkbox 选项进行选中操作. 示例代码: checkbox,js遍历后 ...

  7. NOIP 2015 提高组 Day2

    期望得分:100+10+60=170 实际得分:100+10+35=145 http://www.cogs.pro/cogs/page/page.php?aid=16 T1 跳石头 时间限制:1 s  ...

  8. CSS 定位相关属性 :position

    我们平时经常用margin来进行布局,但是遇到一些盒子不规律布局时,用margin就有点麻烦了,这个时候我们可以用position. position:参数 参数分析: 一.absolute: 相对父 ...

  9. 修复 Plugin execution not covered by lifecycle configuration: org.codehaus.mojo:build-helper-maven-plugin:1.8:add-source (execution: add-source, phase: generate-sources)

    在maven项目中使用add-source时,pom.xml报如下错误: Plugin execution not covered by lifecycle configuration: org.co ...

  10. Spring Cloud全家桶主要组件及简要介绍

    一.微服务简介 微服务是最近的一两年的时间里是很火的一个概念.感觉不学习一下都快跟不上时代的步伐了,下边做一下简单的总结和介绍. 何为微服务?简而言之,微服务架构风格这种开发方法,是以开发一组小型服务 ...