CSS模拟marquee效果

马黑黑 · 发表于 2022-2-1 11:49

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-2-1 11:52 编辑

之前提到过，marquee标签已被废弃。当前的主流浏览器还对marquee兼容，但不敢保证今后会继续支持下去。所以，应使用标准的CSS方式来达成marquee标签所产生的对象移动效果。

这里给出一个示例，可以通过示例举一反三，做成不同的效果。

目标：文字流左右循环移动。

思路：用 @keyframes 制作一个简易动画，用以改变子元素的left值，子元素平缓、循环往复调用此动画。

实现过程：

一、HTML部分

<ul class="mqu"><li>新春快乐</li></ul>

二、CSS部分

<style>

.mqu { /* ul 样式*/
      position: relative; /* 父元素相对定位 */
      width: 500px;
      list-style-type: none; /* 取消 · 符号 */
}
.mqu li { /* li 调用动画 */
      position: absolute; /* 子元素绝对定位于父元素 */
      animation: marq 10s linear infinite alternate;
}
/* 动画 */
@keyframes marq {
      0% { left: 0px;  }
      100% { left: 400px; }
}

</style>

一些说明：

① ul 是无序列表标签，它需要 li 展现列表内容，我们借助 ul 和 li 的父子关系，令 ul 有一个宽度值，以便给儿子 li 一个活动空间；

② 父子元素的定位设置是必须的，不管事实上做不做具体定位，否则子元素无法移动。一般的做法是父元素用 relative 相对定位，子元素用 absolute 绝对定位。子元素的定位是基于父元素的，父元素若不做定位声明，子元素的位置就不会受到父元素约束，会脱离父元素的管制。

③ @keyframes 动画中，100%时应当是多少px，本质上要看父元素的尺寸和自身的尺寸，400px 不是绝对的数值，应根据使用场景变化。同理，示例中的其他数值甚至属性都可根据需要更改。

④ ul 可以有多多的孩子 li，故而，<ul class="mqu"><li>新春快乐</li><br><li>虎年大吉</li> </ul> 这样的HTML代码就会得到两行文字在一起走的效果。

④ 文字上下走怎么实现？让 @keyframes 动画改变子元素的top值，同时，ul 这个爸爸要改变自己提供的场所：宽度够了就好，高度要设定一个合适的值。