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>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...
随机推荐
- JS创建表单提交备份
//保存 function saveFT() { var data = { createDate: GetDateStr(0), name: $("#txtName").val() ...
- 关于meta标签的name="viewport" 概述
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...
- ubuntu 下开源安装
常用开源库安装: 0.安装g++: sudo apt-get install g++ 1.首先不可或缺的就是编译器与基本的函式库: sudo apt-get install build-essenti ...
- SpringMvc aop before
1.config.xml配置文件 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans ...
- mnesia的脏写和事物写的测试
在之前的文章中,测试了脏读和事物读之间性能差别,下面测试下脏写和事物写之间的性能差别: 代码如下: -module(mnesia_text). -compile(export_all). -recor ...
- Thymeleaf框架
简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在 ...
- iOS 10 的杂碎资料
兼容iOS 10 资料整理笔记 1.Notification(通知) 自从Notification被引入之后,苹果就不断的更新优化,但这些更新优化只是小打小闹,直至现在iOS 10开始真正的进行大 ...
- nagios-plugins安装报错--with-mysql: no
--with-mysql: no 解决方法 yum安装mysql-devel yum install mysql-devel
- Spring和ActiveMQ整合的完整实例
Spring和ActiveMQ整合的完整实例 前言 这篇博文,我们基于Spring+JMS+ActiveMQ+Tomcat,做一个Spring4.1.0和ActiveMQ5.11.1整合实例,实现了 ...
- python书写日志的重要性?
转自:https://blog.csdn.net/weixin_43063753/article/details/82899395 程序为什么要写日志?#为了能够在程序在运行过程中记录错误,方便维护, ...