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 ...
随机推荐
- command not found: django-admin.py
http://www.cnblogs.com/Xjng/p/3559984.html django-admin.py startproject projectname 其中projectname 为 ...
- lightoj 1010 (水题,找规律)
lightoj 1010 Knights in Chessboard 链接:http://lightoj.com/volume_showproblem.php?problem=1010 题意:国际象棋 ...
- 运行python时提示:ImportError: No module named plyvel ,ImportError No module named irc 解决过程:
(当前python版本:2.7) 1.在git下载electrum-server: cd / git clone https://github.com/spesmilo/electrum-server ...
- u3d摄像机截图
using System; using UnityEngine; using System.Collections; public class TestCamreaCapture1 : MonoBeh ...
- C++ string功能补充(类型互转,分割,合并,瘦身)
int StringUtil::intFromString(string data) { //NOTE atoi是非标准C函数 return atoi(data.c_str()); } string ...
- Codeforces Round #191 (Div. 2) A. Flipping Game(简单)
A. Flipping Game time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- 重构改善既有代码设计--重构手法05:Introduce Explaining Variable (引入解释性变量)
发现:你有一个复杂的表达式. 解决:将该复杂的表达式(或其中的部分)的结果放进一个临时变量,并以此变量名称来解释表达式用途. //重构前 if((platform.toUpperCase().in ...
- java中error和exception
异常是指程序运行时发生的错误. Throwable是所有异常的父类,它有两个子类:Error和Exception. 1.Error表示程序在运行期间发生了非常严重的错误,并且该错误是不可恢复的.Err ...
- 原生js写Ajax
//原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...
- 【leetcode 简单】 第五十一题 有效电话号码
给定一个包含电话号码列表(一行一个电话号码)的文本文件 file.txt,写一个 bash 脚本输出所有有效的电话号码. 你可以假设一个有效的电话号码必须满足以下两种格式: (xxx) xxx-xxx ...