HTML5怎么设置滚动字幕?

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>

实现原理:

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

<audio controls="controls" loop="loop">

<source src="song.ogg" type="audio/ogg" />

<source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

loop 属性规定当音频结束后将重新开始播放。如果设置该属性,则音频将循环播放。

语法:<audio loop="loop" />


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6159493.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-16
下一篇 2023-03-16

发表评论

登录后才能评论

评论列表(0条)

保存