239楼：JS动态生成CSS @keyframes 动画代码——
<style type="text/css">
.wai-zzmd { /* 走马灯父框 */
position: absolute;
width: 400px;
height: 30px;
overflow: hidden;
}
.wai-zzmd div {/* 走马灯文本框 */
position: absolute;
left: 400px;/*与父框宽度同 */
word-break: keep-all;
white-space: nowrap;
font: normal 20px / 30px Sans-Serif;
color: #000;
text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}
</style>
<div class="wai-zzmd">
<div id="text-zmd">
I can fly now.
</div>
</div>
<script language="javascript">
zzmd(); //运行动画
function zzmd(){
var ziBox = document.getElementById('text-zmd');
var w = ziBox.clientWidth;
var style = document.createElement('style');
var keyframes = '@keyframes fly {to { left: -' + w + 'px;}}';
style.type = 'text/css';
style.innerHTML = keyframes;
ziBox.appendChild(style);
ziBox.style.animation = 'fly 20s linear infinite'; // 20s 根据需要修改
}
</script>
241楼代码解释（占位，有空再补）
红影 发表于 2022-3-23 18:37
不同的代码，同样能展现效果
enen
{:4_181:}
马黑黑 发表于 2022-3-23 17:55
237楼 文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所 ...
和前面那个你帮队长修改的代码一起，这样横向纵向的滚动字代码都有了呢{:4_173:}
马黑黑 发表于 2022-3-23 17:55
237楼 文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所 ...
我多放了几行文字，发现速度变快了，可能是是感觉问题吧，毕竟父框的运动速度不变。
红影 发表于 2022-3-23 18:51
我多放了几行文字，发现速度变快了，可能是是感觉问题吧，毕竟父框的运动速度不变。
父框不运动，它固定场所。文字多之后，如何调整周期时间，好好调试
红影 发表于 2022-3-23 18:50
和前面那个你帮队长修改的代码一起，这样横向纵向的滚动字代码都有了呢
其实所要的方向都可以有，关键是哪一种是我们需要的
<style type="text/css">
.upDiv {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
.upDiv div {
position: absolute;
width: 100%;
height: 80px; /* 大体等于 行数*字体大小 +字体大小*/
font-size:20px;
text-align: center;
top: 100%;
animation: fly 5s linear infinite;
}
/* 动画的 top 为负值，其绝对值等于父元素素高度-字体大小数-若干*/
@keyframes fly { to { top: -75px; } }
</style>
<div class="upDiv">
<div id="txt">
纯CSS走马灯<br>
行二<br>
行三
</div>
</div>
248楼：纯CSS自下而上走马灯代码
<style type="text/css">
.upDiv {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
.upDiv div {
position: absolute;
width: 100%;
height: 80px; /* 大体等于 行数*字体大小 +字体大小*/
font-size:20px;
text-align: center;
top: 100%;
animation: fly 5s linear infinite;
}
/* 动画的 top 为负值，其绝对值等于父元素素高度-字体大小数-若干*/
@keyframes fly { to { top: -75px; } }
</style>
<div class="upDiv">
<div id="txt">
行一<br>
行二<br>
行三
</div>
</div>
本帖最后由 马黑黑 于 2022-3-23 21:02 编辑 <br /><br /><style type="text/css">
.leftDiv {
position: relative;
width: 300px;
min-height: 30px; /* 略大于子元素的字体大小或等于其行高 */
overflow: hidden;
}
.leftDiv div {
position: absolute;
min-width: 100px;
min-height: 30px; /* 与行高保持一致*/
font:20px / 30px Sans-Serif;
text-align: center;
left: 100%;
word-break: keep-all; /* 单行文本必须 */
white-space: nowrap; /* 单行文本必须 */
animation: lfly 10s linear infinite;
}
/* 动画的 left 为-100%或略小*/
@keyframes lfly { to { left: -100%; } }
</style>
<div class="leftDiv">
<div>
纯CSS走马灯 - 自右向左
</div>
</div>
250楼：纯CSS自右向左走马灯代码
<style type="text/css">
.leftDiv {
position: relative;
width: 300px;
min-height: 30px; /* 略大于子元素的字体大小或等于其行高 */
overflow: hidden;
}
.leftDiv div {
position: absolute;
min-width: 100px;
min-height: 30px; /* 与行高保持一致*/
font:20px / 30px Sans-Serif;
text-align: center;
left: 100%;
word-break: keep-all; /* 单行文本必须 */
white-space: nowrap; /* 单行文本必须 */
animation: lfly 10s linear infinite;
}
/* 动画的 left 为-100%或略小*/
@keyframes lfly { to { left: -100%; } }
</style>
<div class="leftDiv">
<div>
纯CSS走马灯 - 自右向左
</div>
</div>
马黑黑 发表于 2022-3-23 19:50
父框不运动，它固定场所。文字多之后，如何调整周期时间，好好调试
嗯嗯，这个要偏感觉自己去调的。
马黑黑 发表于 2022-3-23 19:51
其实所要的方向都可以有，关键是哪一种是我们需要的
是的，任何一个方向都可以，你的哪根到处跑的小球里的文字就是按不容方向的运动。
红影 发表于 2022-3-23 22:27
是的，任何一个方向都可以，你的哪根到处跑的小球里的文字就是按不容方向的运动。
事在人为吧
红影 发表于 2022-3-23 22:24
嗯嗯，这个要偏感觉自己去调的。
是的，没有一成不变的东东
马黑黑 发表于 2022-3-23 20:25
248楼：纯CSS自下而上走马灯代码
还是纯css的感觉更方便呢，只要更容易理解{:4_173:}
红影 发表于 2022-3-23 22:30
还是纯css的感觉更方便呢，只要更容易理解
就怕尺寸不好把握，得多试。JS的，能自动处理子元素加载文字后的的尺寸变化，动画幅度不用人工计算
马黑黑 发表于 2022-3-23 22:27
事在人为吧
人想让文字往哪跑就往哪跑，应该是‘字在人为’{:4_173:}
马黑黑 发表于 2022-3-23 22:28
是的，没有一成不变的东东
自己按照你的代码去试，可能还会有其他意想不到的效果呢{:4_173:}
马黑黑 发表于 2022-3-23 22:32
就怕尺寸不好把握，得多试。JS的，能自动处理子元素加载文字后的的尺寸变化，动画幅度不用人工计算
我情愿麻烦点，也是有点怕JS呢，那个真的挺难的。这两个纯css的太好了，必须大赞{:4_199:}