|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 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% 的值对调。
② 以上个数值乃至属性均为演示之用,具体应用时应合理修改以满足主题需求。
|
评分
-
| 参与人数 2 | 威望 +100 |
金钱 +200 |
经验 +100 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|