文字效果集中营

马黑黑

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

红影

马黑黑 发表于 2022-3-23 17:55
237楼 文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所 ...

和前面那个你帮队长修改的代码一起，这样横向纵向的滚动字代码都有了呢

红影

马黑黑 发表于 2022-3-23 17:55
237楼 文本自下而上走马灯代码说明
实现原理实际上是 css 的 @keyframes 动画，但由于存在不确定因素，所 ...

我多放了几行文字，发现速度变快了，可能是是感觉问题吧，毕竟父框的运动速度不变。

马黑黑

红影 发表于 2022-3-23 18:51
我多放了几行文字，发现速度变快了，可能是是感觉问题吧，毕竟父框的运动速度不变。

父框不运动，它固定场所。文字多之后，如何调整周期时间，好好调试

马黑黑

红影 发表于 2022-3-23 18:50
和前面那个你帮队长修改的代码一起，这样横向纵向的滚动字代码都有了呢

其实所要的方向都可以有，关键是哪一种是我们需要的

马黑黑

纯CSS走马灯
行二
行三

马黑黑

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>

马黑黑

纯CSS走马灯 - 自右向左

马黑黑

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的感觉更方便呢，只要更容易理解

马黑黑

红影 发表于 2022-3-23 22:30
还是纯css的感觉更方便呢，只要更容易理解

就怕尺寸不好把握，得多试。JS的，能自动处理子元素加载文字后的的尺寸变化，动画幅度不用人工计算

红影

马黑黑 发表于 2022-3-23 22:27
事在人为吧

人想让文字往哪跑就往哪跑，应该是‘字在人为’

红影

马黑黑 发表于 2022-3-23 22:28
是的，没有一成不变的东东

自己按照你的代码去试，可能还会有其他意想不到的效果呢

红影

马黑黑 发表于 2022-3-23 22:32
就怕尺寸不好把握，得多试。JS的，能自动处理子元素加载文字后的的尺寸变化，动画幅度不用人工计算

我情愿麻烦点，也是有点怕JS呢，那个真的挺难的。这两个纯css的太好了，必须大赞