文字走马灯之淡进淡出
本帖最后由 马黑黑 于 2022-2-4 13:03 编辑<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% 的值对调。
② 以上个数值乃至属性均为演示之用，具体应用时应合理修改以满足主题需求。
<style>
.m1 {
position: relative;
border: 0px solid;
width:100px;
overflow: hidden;
}
.m1 p {
position: relative;
left: 200px;
width: 100px;
animation: hy 5s linear infinite;
}
@keyframes hy {
0% { left: 100px;}
100% { left: -50px; }
}
</style>
<div class="m1">
<p>试验效果</p>
</div> 不该走的也走了{:5_106:} 马黑黑 发表于 2022-2-4 12:35
不该走的也走了
是啊，不知道是那个操作和论坛设置相关，貌似删了span就好了。
黑黑真厉害，我和清舟说半天没说明白的，黑黑用淡入淡出一句就说明白了{:4_173:}
现在知道了，子框大于父框，且用overflow: hidden;就行了。应该都学过的，实际应用就不行了{:4_173:} 本帖最后由 马黑黑 于 2022-2-4 12:46 编辑 <br /><br /><style>
.gogo {
position: relative;
left: 300px;
width: 100px;
animation: hy 5s linear infinite;
}
</style>
<div class="marq">
<p class="gogo">花潮论坛</p>
</div>
<p>这里不走</p> 红影 发表于 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影响的吧{:4_173:} 困扰了半天的事，黑黑出手分分钟就解决了{:4_189:} 红影 发表于 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
用到的东西，单个知识点大家都会的，下来要练练如何拿它们综合起来去解决问题
嗯嗯，现在可以把它放在播放器上面，就和原来的滚动字的效果一样了{:4_173:} 红影 发表于 2022-2-4 15:07
嗯嗯，现在可以把它放在播放器上面，就和原来的滚动字的效果一样了
我花了很长时间才理解你们的意思 红影 发表于 2022-2-4 15:06
是的，改个名字就不冲突了。
其实是我的语法错误，这是JS代码玩多的缘故，JS可以这样声明变量：
var a, b, c, h = 1; 马黑黑 发表于 2022-2-4 19:45
我花了很长时间才理解你们的意思
是我的描述有问题{:4_173:} 马黑黑 发表于 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也可以
一下子定义一串，有意思{:4_173:}
页:
[1]
2