CSS实现简单无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
width: 500px;
height: 100px;
box-shadow: 0 0 120px #333;
overflow: hidden;
margin: 50px auto;
cursor: pointer;
position: relative;
}
.list{
width: 200%;
height: 100px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.list li{
list-style-type: none;
float: left;
margin: 10px;
width: 74px;
height: 74px;
line-height: 74px;
color: #414141;
text-align: center;
font-size: 52px;
text-shadow: 1px 1px 0px rgba(255,255,255,.55);
border: 1px solid #333;
padding: 2px;
background-color: orange;
}
@-webkit-keyframes move{
from{
left: 0; /*这里使用translate移动时，hover暂停时会有回弹，原因不详*/
/*-webkit-transform:translate3d(0,0,0);*/
}
to{
left: -500px;
/*-webkit-transform:translate3d(-500px,0,0);*/
}
}
.animate{
-webkit-animation:move 5s linear infinite;
}
.wrap:hover .animate{
-webkit-animation-play-state: paused;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="list animate">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
CSS实现简单无缝滚动的更多相关文章
- css 图片的无缝滚动
转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- 利用CSS实现带相同间隔地无缝滚动动画
说明:因为在移动上主要利用CSS来做动画,所以没有考虑其他浏览器的兼容性,只有-webkit这个前缀,如果需要其他浏览器,请自行补齐. 首先解释一下什么是无缝滚动动画, 例如下面的例子 See the ...
- js实现简单易用的上下无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- JavaScript学习笔记——简单无缝循环滚动展示图片的实现
今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- JavaScript（六）——实现图片上下或者左右无缝滚动
/*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...
- JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
- js图片无缝滚动代码
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
随机推荐
- 在 Ubuntu16.04上安装并使用Docker
介绍 Docker是一个开放源代码软件项目,让应用程序布署在软件容器下的工作可以自动化进行,借此在Linux操作系统上,提供一个额外的软件抽象层,以及操作系统层虚拟化的自动管理机制[1].Docker ...
- Sping Boot入门到实战之实战篇（二）：一些常用功能的Spring Boot Starters
包含功能 阿里云消息服务MNS 阿里云消息队列服务(即时消息.延迟消息.事务消息) AOP日志 基于MyBatis通用Mapper及DRUID的数据库访问 dubbo支持 错误处理 七牛图片服务 re ...
- ubuntu下matlab的无界面启动---命令行操作
命令行下运行 Matlab 及 函数 首先参考命令行下matlab的运行参数的定义与作用:http://www.cnblogs.com/beanocean/p/3677404.html 创建示例程序: ...
- 【特征匹配】SIFT原理与C源代码剖析
相关: KD树+BBF算法解析 SURF原理与源代码解析 SIFT的原理已经有非常多大牛的博客上做了解析,本文重点将以Rob Hess等人用C实现的代码做解析,结合代码SIFT原理会更easy理解.一 ...
- Docker入门系列3：使用
入门 首先强烈建议玩一遍官方的入门教程,Interactive commandline tutorial,下面是答案: 查看版本:docker version 搜索Image:docker searc ...
- mysql分组查询n条记录
当业务逻辑越来越复杂时,这个查询的需求会越来越多,今天写成笔记记录下来,防止再忘记 SELECT * FROM `notice` a where add_time > 1513008000 an ...
- 模块：（日期选择）jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery.bootstrap实现日期下拉选择 点击文本框弹出窗口 弹窗显示日期时间选择下拉 年份取当前年份的前后各5年 天数随年份和月份的变化而变化 点击保存,文本框中显示选中的日期 代码部分 ...
- HIbernate 注解 mappedBy 与 inverse
hibernate中 配置文件中的inverse属性意思就是放弃控制权 ,主导权由对方控制,也就是说 我方进行的删除等操作不会影响到对方 即使设置了cascadeType.ALL 这个解释其实就是hi ...
- java中随机生成汉字
main方法中使用: //随机生成100个汉字 String ss=""; for(int i=0;i<100;i++){ ss+=getChinese(i); } Syst ...
- AWS：5.公有云编程
主要内容 1.AWS接口 2.使用AWS命令行 3.使用python sdk编程 AWS接口 Console:web控制台 登录amazon后在"我的账户" -> AWS管理 ...