css写无缝滚动
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写无缝滚动的更多相关文章
- 纯css3代码写无缝滚动效果
主要用到css3中的动画 @keyframes, animation. 布局是外层一个div宽固定,然后overflow hidden 绝对定位,里面的ul 固定定位.通过对ul添加动画来实现效果.具 ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- 手写JS无缝滚动插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 自己写了一个无缝滚动的插件(jQuery)
效果图: html代码: 1 <h1>无缝滚动,向右滚动</h1> 2 <ul id="guoul1"> 3 <li><img ...
- css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- JS 阶段小练习~ 无缝滚动
结合下学了的知识,做个模拟的综合性扩展练习~~ 大致功能如下: 1.点开html后,图片自动移动展示 2.点击左右方向,可以改变 图片移动的方向(改变left的值,正负) 3.鼠标移入移出图片后,图 ...
- js原生选项卡(包含无缝滚动轮播图)一
原生js选项卡的几种写法,整片文章我会由简及难的描述几种常用的原生选项卡的写法: Improve little by little every day! 1>基本选项卡: 思路:循环中先清除再添 ...
- js函数——倒计时模块+无缝滚动
倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- 洛谷P1029 最大公约数和最小公倍数问题
题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...
- php整理
linux上安装php配套环境有些繁琐 推荐使用一键安装: https://lnmp.org/install.html phalcon框架环境: centos7下php7.0.x安装phalcon框架
- linux shell 通配符
http://note.youdao.com/noteshare?id=4b6bc019e055c897c6dfb81fe2c17756
- 【题解】Berland.Taxi Codeforces 883L 模拟 线段树 堆
Prelude 题目传送门:ヾ(•ω•`)o Solution 按照题意模拟即可. 维护一个优先队列,里面装的是正在运营中的出租车,关键字是乘客的下车时间. 维护一个线段树,第\(i\)个位置表示第\ ...
- 小程序navigatorTo缺点和修正方法
1.不好带参数跳转到tabbar,即下部的导航栏目. reLauntch方法可以传递参数到导航栏目: go_to_prolist: function (e) { var datatype = e.cu ...
- 分布式监控系统开发【day37】:监控数据如何存储(七)
一.如何存储 二.目录结构 三.代码调用逻辑关系 四.实现代码 1.data_optimization 1.存筛选出来符合条件的数据 def get_data_slice(self,lastest_d ...
- java io-1基本概念
java io-1基本概念 2015-07-03 15:17 648人阅读 评论(0) 收藏 举报 分类: [JavaSE](37) 目录(?)[+] ------------------ ...
- OpenCV---图像金字塔原理
图像金字塔原理 (一)图像缩小(先高斯模糊,再降采样,需要一次次重复,不能一次到底) (二)图像扩大(先扩大,再卷积或者使用拉普拉斯金字塔) 图像金字塔介绍 图像金字塔是图像中多尺度表达的一种,最主要 ...
- 2-sat 分类讨论 UVALIVE 3713
蓝书326 //看看会不会爆int!数组会不会少了一维! //取物问题一定要小心先手胜利的条件 #include <bits/stdc++.h> using namespace std; ...
- C11线程管理:条件变量
1.简介 C11提供另外一种用于等待的同步机制,它可以阻塞一个或者多个线程,直到收到另外一个线程发出的通知或者超时,才会唤醒当前阻塞的线程.条件变量要和互斥量配合起来使用. condition_var ...