css js html 实现滚动字幕

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>滚动字幕</title>
<div id="affiche">
<span class="affiche_text">字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~字幕会滚动啦~</span>
</div>
</head>
<style>
#affiche {
color: red;
display: block;
width: 96%;
height: 30px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.affiche_text {
position: absolute;
top: 0;
left: 100%;
line-height: 30px;
display: block;
word-break: keep-all;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

css js html 实现滚动字幕相关推荐

CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
原生JS实现marquee 滚动字幕效果，完美解决频闪问题
marquee标签在HTML5 中已经不再受支持但是我们很多时候会用到滚动字幕的样式,所以就采用了实时动态改变元素位置的方式来实现此功能,在实现的时候用过HTML DOM setInterval() ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...
css + js实现简单无缝滚动字幕
css + js实现无缝滚动字幕利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕实现思路 html 代码 css 代码 js 代 ...
js，jq html css 实现数字上下滚动效果
文章目录使用方法一.gScrollNumber.js是什么? 二.使用步骤 1.引入库 2.效果截图使用方法用于数字屏更新滚动效果. 一.gScrollNumber.js是什么? 用来使数字能 ...
JS+CSS打造随屏幕滚动的quick快速导航代码
代码内容: <html> <head> <title>JS+CSS打造随屏幕滚动的quick快速导航代码_网页代码站(www.webdm.cn)</title ...
html 向上滚动不间断,向上不间断滚动div+css+js模板
div+css不间断向上滚动模板上一次给大家介绍一种div css的不间断滚动代码JS特别多(不间断滚动css代码),这次给大家介绍的是比较实用比较简单的不间断css滚动代码 DIV+CSS不间断滚 ...
html如何上下滚动字幕,css如何做滚动字幕效果？
css如何做滚动字幕效果?下面本篇文章给大家介绍一下使用CSS做滚动字幕效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以利用animation属性和@ke ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...

css js html 实现滚动字幕

css js html 实现滚动字幕相关推荐

最新文章

热门文章