来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 实现原理：1 利用CSS3的@keyframes规则创建动画效果；2 使用CSS3的animation效果完成滚动切换。CSS代码复制代码1 @-webkit-keyframes scrollText1 {2 0%{3 -webkit-transform: translateY...
|
实现原理：
1. 利用CSS3的@keyframes规则创建动画效果；
2. 使用CSS3的animation效果完成滚动切换。
CSS代码
复制代码
1 @-webkit-keyframes scrollText1 {
2 0%{
3 -webkit-transform: translateY(0px);
4 }
5 20%{
6 -webkit-transform: translateY(-30px);
7 }
8 40%{
9 -webkit-transform: translateY(-60px);
10 }
11 60%{
12 -webkit-transform: translateY(-90px);
13 }
14 80%{
15 -webkit-transform: translateY(-120px);
16 }
17 100%{
18 -webkit-transform: translateY(-150px);
19 }
20 }
21
22 @keyframes scrollText1 {
23 0%{
24 transform: translateY(0px);
25 }
26 20%{
27 transform: translateY(-30px);
28 }
29 40%{
30 transform: translateY(-60px);
31 }
32 60%{
33 transform: translateY(-90px);
34 }
35 80%{
36 transform: translateY(-120px);
37 }
38 100%{
39 transform: translateY(-150px);
40 }
41 }
42
43 .box3{
44 position: relative;
45 top: 20px;
46 left: 20px;
47 width: 200px;
48 height: 30px;
49 overflow: hidden;
50 border:1px solid #ccc;
51 }
52
53 .border3{
54 top: 0px;
55 -webkit-animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;
56 animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) ;
57 }
58
59 .border3 div{
60 height: 30px;
61 }
62
63 .border3:hover{
64 animation-play-state:paused;
65 -webkit-animation-play-state:paused;
66 }
复制代码
CSS代码说明：
@-webkit-keyframes及@keyframes定义了从0% ~ 100%之间，每过20%的时间，向上移动30px，总共有6次移动；
.box3 定义外容器的基本属性
.border3 定义了内容器的属性，-webkit-animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) 和 animation:scrollText1 8s infinite cubic-bezier(1,0,0.5,0) 定义了用8s种循环一次，无限循环已经移动是的效果；
.border3 div 定义了纵向滚动内容的基本样式；
.border3:hover 定义了鼠标移入容器是的效果，animation-play-state:paused 及 -webkit-animation-play-state:paused 定义了动画暂停；
HTML代码
复制代码
1 <div class="box3">
2 <div class="border3">
3 <div>This is a test 1.</div>
4 <div>This is a test 2.</div>
5 <div>This is a test 3.</div>
6 <div>This is a test 4.</div>
7 <div>This is a test 5.</div>
8 <div>This is a test 1.</div>
9 </div>
10 </div>
复制代码
HTML代码说明：
定义了6条信息可以纵向滚动，其中前5条是真正纵向滚动的信息，第6条和第1条信息是一样的，原因很简单，因为使用了@keyframes方式来实现动画效果，第1条信息的效果是默认为停止的，所以用第6条信息制作一个替代方法，在第一次循环结束后，可以无缝继续滚动，大家可以去掉第6条试一下，就可以看见效果了。
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
