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 ...
随机推荐
- PID控制算法的C语言实现七 梯形积分的PID控制算法C语言实现
在PID控制律中积分项的作用是消除余差,为了减小余差,应提高积分项的运算精度,为此,可将矩形积分改为梯形积分. 梯形积分的计算公式为: pid.voltage=pid.Kp*pid.err+index ...
- codeforces gym 100952 A B C D E F G H I J
gym 100952 A #include <iostream> #include<cstdio> #include<cmath> #include<cstr ...
- nodejs express框架一个工程中同时使用ejs模版和jade模版
在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使 ...
- nginx如何配置虚拟主机
server { listen 80; #listen [::]:80 default_server ipv6only=on; server_name local.presion.caomall.ne ...
- Linux下如何卸载软件(Debian系)
说明:此方法适用于Debian.Ubuntu等带apt工具的操作系统. 步骤: 1.首先我们需要知道将要卸载的软件名称,比如我现在打算卸载tightvncserver,但是如果你不确定名称,没关系,可 ...
- 将oh-my-zsh编程真正的my zsh
环境: Ubuntu 32位 oh-my-zsh安装: 1.安装zsh: sudo apt-get install zsh 2.将当前用户的shell环境修改为zsh: chsh -s /bin/z ...
- 利用PhantomJS生成网站截图
var page = require('webpage').create(); page.open('http://qq.com', function () { page.render('exampl ...
- 【CodeForces】889 B. Restoration of string
[题目]B. Restoration of string [题意]当一个字符串在字符串S中的出现次数不小于任意子串的出现次数时,定义这个字符串是高频字符串.给定n个字符串,求构造出最短的字符串S满足着 ...
- wepy开发小程序 大坑....本地调试ok,小程序上传体验版 组件出现问题
如果你碰到的上述问题(本地调试ok,小程序上传体验版 各种莫名其妙的问题-卡死-组件属性失效-$apply()不起作用) 您需要关闭 微信开发者工具中: 1.微信开发者工具-->项目--> ...
- Ajax请求数据与删除数据后刷新页面
1.ajax异步请求数据后填入模态框 请求数据的按钮(HTML) <a class="queryA" href="javascript:void(0)" ...