HTML5怎么设置滚动字幕?

html-css028

HTML5怎么设置滚动字幕?,第1张

<marquee behavior="alternate">来回滚动</marquee> <marquee behavior="scroll">单方向循环滚动</marquee> <marquee behavior="scroll" direction="up" height="30">改单方向向上循环滚动</marquee> <marquee behavior="slide">只滚动一次</marquee> <marquee behavior="slide" direction="up">改向上只滚动一次了</marquee> <marquee behavior=="slide" direction="left" bgcolor="red">背景色是红色的</marquee> <marquee direction="right">向右滚动</marquee>

html5 视觉差滚动效果

原理就是一种利用控制各个图片层之间滚动的速度,来产生一种立体空间的效果,每个层都用一个png透明图片做为背景,然后滚动的时候控制一下每个不同的速度。

不过有两个方面需要注意:

1、以大量图片为特色的网站应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验;

2、某些网站页面在移动设备上的效果可能较之在PC上有所不同,一些功能也可能无法正常使用。

实现原理:

1. 利用CSS3的@keyframes规则创建动画效果;

2. 使用CSS3的animation效果完成滚动切换。

1 @-webkit-keyframes scrollText2 {

2 0%{

3 -webkit-transform: translateX(0px)

4 }

5 20%{

6 -webkit-transform: translateX(-204px)

7 }

8 40%{

9 -webkit-transform: translateX(-408px)

10 }

11 60%{

12 -webkit-transform: translateX(-612px)

13 }

14 80%{

15 -webkit-transform: translateX(-816px)

16 }

17 100%{

18 -webkit-transform: translateX(-1020px)

19 }

20 }

21 @keyframes scrollText2 {

22 0%{

23 transform: translateX(0px)

24 }

25 20%{

26 transform: translateX(-204px)

27 }

28 40%{

29 transform: translateX(-408px)

30 }

31 60%{

32 transform: translateX(-612px)

33 }

34 80%{

35 transform: translateX(-816px)

36 }

37 100%{

38 transform: translateX(-1020px)

39 }

40 }

41

42 .box4{

43 position: absolute

44 top: 100px

45 left: 100px

46 width: 200px

47 height: 30px

48 overflow: hidden

49 }

50 .border4{

51 position: absolute

52 top: 0px

53 left: 0px

54 width: 1400px

55 -webkit-animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)

56 animation:scrollText2 12s infinite cubic-bezier(1,0,0.5,0)

57 }

58 .border4 div{

59 height: 30px

60 width: 200px

61 overflow: hidden

62 display: inline-block

63 }

64 .border4:hover{

65 animation-play-state:paused

66 -webkit-animation-play-state:paused

67 }

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 定义了动画暂停;

1 <div class="box4">

2 <div class="border4">

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条信息制作一个替代方法,在第一次循环结束后,可以无缝继续滚动。