文字走马灯之淡进淡出

马黑黑

<style>
/* marq 提供活动场景
必要时设置一个高度
父、子元素均需定位
*/
.marq {
        position: relative;
        border: 1px solid; /* 观察效果之用 */
        width:200px;
        overflow: hidden;
}
/* p 或 span 装载文字  width、left必须设定 */
.marq p, .marq span {
        position: relative;
        left: 300px;
        width: 100px;
        animation: gogo 5s linear infinite;
}
/* 可配合父元素尺寸、p宽度调整 */
@keyframes gogo {
        0%                { left: 200px;}
        100%        { left: -100px; }
}
</style>

<div class="marq">
        <p>花潮论坛</p>
</div>

原理：改变子元素 left 值，令其少于/多于父元素位置并陆续超出父窗体，父元素overflow:hidden值阻挡超出部分的显示，从而达到淡进淡出的效果。

两点点说明：

① 上面代码，文字行进的方向是自右向左，需自左向右的可将 gogo 动画的 0% 和 100% 的值对调。

② 以上个数值乃至属性均为演示之用，具体应用时应合理修改以满足主题需求。

红影

试验效果

马黑黑

不该走的也走了

红影

马黑黑 发表于 2022-2-4 12:35
不该走的也走了

是啊，不知道是那个操作和论坛设置相关，貌似删了span就好了。

黑黑真厉害，我和清舟说半天没说明白的，黑黑用淡入淡出一句就说明白了

现在知道了，子框大于父框，且用overflow: hidden;就行了。应该都学过的，实际应用就不行了

马黑黑

花潮论坛

这里不走

马黑黑

红影 发表于 2022-2-4 12:40
是啊，不知道是那个操作和论坛设置相关，貌似删了span就好了。

黑黑真厉害，我和清舟说半天没说明白的 ...

嗯，论坛程序可能用上很多 span。那么，比较保险的做法是：

.marq p, span {
        /* ... */
}

改为：

.gogo {
        /* ... */
}

再在文本标签用上：<p class="gogo">花潮论坛</p>

红影

马黑黑 发表于 2022-2-4 12:41
.marq {
        position: relative;
        border: 1px solid; /* 观察效果之用 */

看起来就是span影响的吧

红影

困扰了半天的事，黑黑出手分分钟就解决了

马黑黑

红影 发表于 2022-2-4 12:45
看起来就是span影响的吧

嗯，删掉span，或俺6#的做法

马黑黑

红影 发表于 2022-2-4 12:46
困扰了半天的事，黑黑出手分分钟就解决了

用到的东西，单个知识点大家都会的，下来要练练如何拿它们综合起来去解决问题

马黑黑

红影 发表于 2022-2-4 12:40
是啊，不知道是那个操作和论坛设置相关，貌似删了span就好了。

黑黑真厉害，我和清舟说半天没说明白的 ...

span其实也可用，CSS类名变一下，另外，我喜欢偷懒，爱用 .xx p, span {} 这样的表述，正确的做法应是：

.xx p, .xx span {}

红影

马黑黑 发表于 2022-2-4 12:45
嗯，论坛程序可能用上很多 span。那么，比较保险的做法是：

.marq p, span {

是的，改个名字就不冲突了。

红影

马黑黑 发表于 2022-2-4 12:48
用到的东西，单个知识点大家都会的，下来要练练如何拿它们综合起来去解决问题

嗯嗯，现在可以把它放在播放器上面，就和原来的滚动字的效果一样了

马黑黑

红影 发表于 2022-2-4 15:07
嗯嗯，现在可以把它放在播放器上面，就和原来的滚动字的效果一样了

我花了很长时间才理解你们的意思

马黑黑

红影 发表于 2022-2-4 15:06
是的，改个名字就不冲突了。

其实是我的语法错误，这是JS代码玩多的缘故，JS可以这样声明变量：

var a, b, c, h = 1;

红影

马黑黑 发表于 2022-2-4 19:45
我花了很长时间才理解你们的意思

是我的描述有问题

红影

马黑黑 发表于 2022-2-4 19:46
其实是我的语法错误，这是JS代码玩多的缘故，JS可以这样声明变量：

var a, b, c, h = 1;

天啊，这个没见过。

马黑黑

红影 发表于 2022-2-4 21:52
天啊，这个没见过。

basic语言可以这么声明，JS也可以

马黑黑

红影 发表于 2022-2-4 21:51
是我的描述有问题

也不是的。我理解别人的话语总是有难度的，我的思维往往与别人不在一个层面上。

红影

马黑黑 发表于 2022-2-4 23:09
basic语言可以这么声明，JS也可以

一下子定义一串，有意思