CSS3+HTML5特效4 - 横向无缝滚动
先看例子
如果看完上一篇纵向滚动的朋友,就很容易理解横向滚动的实现方式了。
实现原理:
1. 利用CSS3的@keyframes规则创建动画效果;
2. 使用CSS3的animation效果完成滚动切换。
@-webkit-keyframes scrollText2 {
0%{
-webkit-transform: translateX(0px);
}
20%{
-webkit-transform: translateX(-204px);
}
40%{
-webkit-transform: translateX(-408px);
}
60%{
-webkit-transform: translateX(-612px);
}
80%{
-webkit-transform: translateX(-816px);
}
100%{
-webkit-transform: translateX(-1020px);
}
}
@keyframes scrollText2 {
0%{
transform: translateX(0px);
}
20%{
transform: translateX(-204px);
}
40%{
transform: translateX(-408px);
}
60%{
transform: translateX(-612px);
}
80%{
transform: translateX(-816px);
}
100%{
transform: translateX(-1020px);
}
} .box4{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 30px;
overflow: hidden;
}
.border4{
position: absolute;
top: 0px;
left: 0px;
width: 1400px;
-webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;
animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0) ;
}
.border4 div{
height: 30px;
width: 200px;
overflow: hidden;
display: inline-block;
}
.border4:hover{
animation-play-state:paused;
-webkit-animation-play-state:paused;
}
CSS代码说明:
- @-webkit-keyframes及@keyframes定义了从0% ~ 100%之间,每过20%的时间,向左移动204px,总共有6次移动;
- .box4 定义外容器的基本属性
- .border4 定义了内容器的属性,-webkit-animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 12s infinite cubic-bezier(1,0,0.5,0) 定义了用12s种循环一次,无限循环的效果;
- .border4 div 定义了纵向滚动内容的基本样式;
- .border4:hover 定义了鼠标移入容器时的效果,animation-play-state:paused 及 -webkit-animation-play-state:paused 定义了动画暂停;
<div class="box4">
<div class="border4">
<div>This is a test 1.</div>
<div>This is a test 2.</div>
<div>This is a test 3.</div>
<div>This is a test 4.</div>
<div>This is a test 5.</div>
<div>This is a test 1.</div>
</div>
</div>
HTML代码说明:
定义了6条信息可以横向滚动,其中前5条是真正横向滚动的信息,第6条和第1条信息是一样的,原因和上一篇纵向滚动一样,因为使用了@keyframes方式来实现动画效果,第1条信息的效果是默认为停止的,所以用第6条信息制作一个替代方法,在第一次循环结束后,可以无缝继续滚动。
CSS3+HTML5特效4 - 横向无缝滚动的更多相关文章
- CSS3+HTML5特效3 - 纵向无缝滚动
老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. ...
- CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局
原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...
- CSS3+HTML5特效9 - 简单的时钟
原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍) 实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...
- 可以左右移动横向无缝滚动的JS图片展示代码
在酷站网站下的,具体路径忘了,稍微改了一下,让它看起来像组滑动 1)被引用的js文件ScrollPic.js ?){){i+=l.length;)I=document.cookie.length;o= ...
- 用CSS3实现无限循环的无缝滚动
有时候在页面的某个模块中,需要无限循环的滚动一些消息.那么如果我们用js实现无缝衔接滚动的思路是什么呢(比如我们这个模块是向上滚动的)? 克隆A一份完全一样的数据B放在原数据A的后面: 使用setIn ...
- scrollLeft的相关问题(js横向无缝滚动)
<div id="demo"> <div id="innerdemo"> <div id="demo1"> ...
- css3+html5特效-向上滑动
css+html5特效-向上滑动 效果描述:切换的下拉和上拉状态 鼠标悬浮:下拉鼠标离开:上拉 /*外容器设置*/ .box1{position:relative;top:100px;left:100 ...
- html5——动画案例(无缝滚动)
无缝滚动:是两组拼在一起的 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3+HTML5特效7 - 特殊的 Loading 效果
效果如下 实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@ke ...
随机推荐
- 开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解
原文:[原创]开源Math.NET基础数学类库使用(06)数值分析之线性方程组直接求解 开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math.NET(一) ...
- CentOS-6.5-x86_64 最小化安装后,怎样安装 man 程序?
CentOS-6.5-x86_64 最小化安装后.怎样安装man 程序? CentOS-6.5-x86_64 最小化安装后,没有man 程序,没它还真的不方便. man 是 manual(手冊)的意思 ...
- ACdream: ACfun
ACfun Time Limit: 2000/1000MS (Java/Others)Memory Limit: 128000/64000KB (Java/Others) SubmitStatisti ...
- Visual Studio中开发
如何在Visual Studio中开发自己的代码生成器插件 Visual Studio是美国微软公司开发的一个基本完整的开发工具集,它包括了整个软件生命周期中所需要的大部分工具,如UML工具.代 ...
- SELECT 场 FROM 表 WHERE 字段 Like 条件
间有关的条件,SQL它提供了四种匹配模式: 1.%: 表示随意0个或多个字符.可匹配随意类型和长度的字符.有些情况下若是中文,请使用两个百分号(%%)表示. 比方 SELECT * FROM [use ...
- leetcode:pascal's_triangle_II
一. 称号 一行值. 二. 分析 这道题跟Pascal'sTriangle非常类似,仅仅是这里仅仅须要求出某一行的结果.Pascal's Triangle中由于是求出所有结果,所以我们 ...
- JBoss配置解决高并发连接异常问题(转)
这两天一个项目在做压力测试的时候,发现只要并发数超过250个,连续测试两轮就会有连接异常出现,测试轮数越多出现越频繁,异常日志如下: Caused by: com.caucho.hessian.cli ...
- Java爬虫,信息抓取的实现(转)
转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23272657 今天公司有个需求,需要做一些指定网站查询后的数据的抓取,于是花了点 ...
- Swift UI学习UITableView and protocol use
Models: UserModel.swift Views: UserInfoCell.swift Controllers: RootViewController.swift, DetailViewC ...
- .net与Java的WebService互调
本文记录一下.net与Java是如何进行Web Service的互相调用的. 1.准备工作 MyEclipse 10 JDK 1.6.0_13 Visual Studio 2012 .net fram ...