纯html+css 实现滚动新闻

CSS3 实现滚动字幕效果(即跑马灯)

参考 https://www.cnblogs.com/h5n1/archive/2012/03/03/2378397.html

 视频版本 用HTML和CSS实现文字跑马灯效果 blibli

HTML5+CSS3小实例：超酷的文字滚动特效 https://www.jianshu.com/p/f84eba69f017

 

- 本周亮点 -

本周图书国庆特大书讯
我们虚位以待 你准备好了吗
本周解码亮相国际书展会

 

- 未来猜想 -

新财富主义下消失的白领职业
小行星2098年掠过地球

 

纯html 实现滚动新闻 来源于CSDN

<marquee>在HTML和HTML5中都属于废弃的特性，建议不要使用这个标签。代替的方案就是使用CSS3中的animation和keyframes来实现跑马灯。见此参考

js版本 在此

 1 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
 2   <STRONG>
 3     <SPAN lang=EN-US style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体" XML:LANG="EN-US">-</SPAN>
 4     <SPAN style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">本周亮点
 5       <SPAN lang=EN-US XML:LANG="EN-US">-</SPAN></SPAN>
 6   </STRONG>
 7 </P>
 8 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
 9   <SPAN style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
10     <marquee behavior="scroll" direction="up" width="300" height="65" loop="-1" scrollamount="1.5" scrolldelay="0.5" stytle="font:50px">本周图书国庆特大书讯
11       <br/>我们虚位以待 你准备好了吗
12       <br/>本周解码亮相国际书展会</marquee></SPAN>
13 </P>
14 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
15   <SPAN lang=EN-US style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体" XML:LANG="EN-US"></SPAN>
16 </P>
17 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
18   <STRONG>
19     <SPAN lang=EN-US style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体" XML:LANG="EN-US">-</SPAN>
20     <SPAN style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">未来猜想
21       <SPAN lang=EN-US XML:LANG="EN-US">-</SPAN></SPAN>
22   </STRONG>
23 </P>
24 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
25   <SPAN style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体">
26     <marquee behavior="scroll" direction="up" width="300" height="65" loop="-1" scrollamount="1.5" scrolldelay="0.5" stytle="font:50px">新财富主义下消失的白领职业
27       <br/>小行星2098年掠过地球</marquee></SPAN>
28 </P>
29 <P class=MsoNormal style="MARGIN: 0cm 0cm 0pt">
30   <SPAN lang=EN-US style="FONT-SIZE: 9pt; FONT-FAMILY: 宋体" XML:LANG="EN-US"></SPAN>
31 </P>

 

posted on 2022-09-08 03:16  Redwei  阅读(598)  评论(0)  编辑  收藏  举报