论坛 › 马黑黑教程专版 › CSS模拟marquee效果

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

CSS模拟marquee效果

本帖最后由 马黑黑 于 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 这个爸爸要改变自己提供的场所：宽度够了就好，高度要设定一个合适的值。

马黑黑 发表于 2022-2-1 12:46

本帖最后由 马黑黑 于 2022-2-1 12:48 编辑 <br /><br /><style>

.mq { /* ul 样式*/
        margin: auto;
        padding: 10px;
        position: relative;
        width: 720px;
        height: 460px;
        background: linear-gradient(45deg,transparent,#cfee6d, #c1c2c3);
}
.mq div { /* li 调用动画 */
        position: relative;
        font-family: Fixedsys,'微软雅黑','宋体';
        font-size: 40px;
        font-weight: bold;
        text-shadow: 2px 2px 4px #000;
        color: red;
        width: 200px;
        height: 100px;
        text-align: center;
        left: calc(50% - 100px);
        animation: mq 10s linear infinite alternate;
}
.mq iframe {
        position: absolute;
        left: -50px;
        top: 400px;
        clip-path: circle(33px at 43px 43px);
        opacity: 0.8;
}
/* 动画 */
@keyframes mq {
        0%, 100% { left: calc(50% - 100px); top: 0;}
        25% { left: calc(100% - 200px); top: calc(50% - 50px); }
        50% { left: calc(50% - 100px); top: calc(100% - 120px);}
        75% { left:0; top: calc(50% - 50px); }

}

</style>

<div class="mq">
        <div>新春快乐<br>虎年大吉</div>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=568648300&amp;auto=1&amp;height=66"></iframe>
</div>

红影 发表于 2022-2-1 19:47

原来二楼的命令有变化，若和一楼一样，应该是直线行进的吧{:4_173:}

红影 发表于 2022-2-1 19:53

这个好，可以用来做按钮上的滚动字了吧，而且是符合CSS方式的。记得小辣椒一直想做按钮上的滚动字呢{:4_187:}

马黑黑 发表于 2022-2-1 20:04

红影 发表于 2022-2-1 19:53
这个好，可以用来做按钮上的滚动字了吧，而且是符合CSS方式的。记得小辣椒一直想做按钮上的滚动字呢{:4_187 ...

是啊。每次我在本地运行小辣椒的代码，我的HTML编辑器都会提示marquee标签已被弃用{:4_170:}

马黑黑 发表于 2022-2-1 20:04

红影 发表于 2022-2-1 19:47
原来二楼的命令有变化，若和一楼一样，应该是直线行进的吧

二楼是另外的机制，但它是在一楼基础代码上变化而来

红影 发表于 2022-2-1 20:10

<style>

.hy {
        margin: auto;
        padding: 10px;
        position: relative;
        width: 520px;
        height: 260px;
        background: linear-gradient(45deg,transparent,#cfee6d, #c1c2c3);
}

.hy div {
        position: relative;
        font-family: Fixedsys,'微软雅黑','宋体';
        font-size: 10px;
        font-weight: bold;
        color: #000;
        width: 200px;
        height: 40px;
        top: 150px;
        left: 320px;
        animation: hy1 10s linear infinite;
}

.hy iframe {
        position: absolute;
        left: 245px;
        top: 180px;
        clip-path: circle(33px at 43px 43px);
        opacity: 0.8;
}
/* 动画 */
@keyframes hy1 {
        0% { left: 360px; }
        100% { left: 180px;}

}

</style>

<div class="hy">
        <div>请欣赏乐曲</div>
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=568648300&amp;auto=0&amp;height=66"></iframe>
</div>

红影 发表于 2022-2-1 20:21

怎么能让文字一点点走入不见呢

红影 发表于 2022-2-1 20:30

也就是像marquee那样，从隐形的边框里走出来，然后逐字走入不见。

马黑黑 发表于 2022-2-1 20:37

红影 发表于 2022-2-1 20:21
怎么能让文字一点点走入不见呢

让它消失的办法有，left值变为一定值的负数，这样它就脱离父窗体；animation动画不用alternate参数。尺寸把握好，你试试就知道。

加林森 发表于 2022-2-1 20:57

来学习

绿叶清舟 发表于 2022-2-1 21:17

这个好能做个完整的播放器来了

红影 发表于 2022-2-1 21:21

马黑黑 发表于 2022-2-1 20:37
让它消失的办法有，left值变为一定值的负数，这样它就脱离父窗体；animation动画不用alternate参数。尺寸 ...

alternate参数我拿掉了，但我想让文字在播放器上面，差不多左右居中啊，怎么能设负值呢？

红影 发表于 2022-2-1 21:36

马黑黑 发表于 2022-2-1 20:04
是啊。每次我在本地运行小辣椒的代码，我的HTML编辑器都会提示marquee标签已被弃用

那么灵啊，我这里没有提醒呢。

马黑黑 发表于 2022-2-2 09:16

红影 发表于 2022-2-1 21:36
那么灵啊，我这里没有提醒呢。

在针对HTML文档的属性设置中，要启用语法检查

马黑黑 发表于 2022-2-2 09:19

红影 发表于 2022-2-1 21:21
alternate参数我拿掉了，但我想让文字在播放器上面，差不多左右居中啊，怎么能设负值呢？

这个不是负值的问题，这个，你要根据播放器的位置来调整 mqu 文字的位置，令其与值重叠并浮于其上方

马黑黑 发表于 2022-2-2 09:20

绿叶清舟 发表于 2022-2-1 21:17
这个好能做个完整的播放器来了

可以，要处理一下位置与层级关系

红影 发表于 2022-2-2 14:00

马黑黑 发表于 2022-2-2 09:16
在针对HTML文档的属性设置中，要启用语法检查

这个我从来没用过，不懂啊。

红影 发表于 2022-2-2 14:02

马黑黑 发表于 2022-2-2 09:19
这个不是负值的问题，这个，你要根据播放器的位置来调整 mqu 文字的位置，令其与值重叠并浮于其上方

完全不得要领，黑黑做个示范？我也最多做成7楼那样的了，再弄就弄不出来了{:4_173:}

马黑黑 发表于 2022-2-2 14:31

红影 发表于 2022-2-2 14:02
完全不得要领，黑黑做个示范？我也最多做成7楼那样的了，再弄就弄不出来了

定位和尺寸的问题而已，你已经有能力解决的

查看完整版本: CSS模拟marquee效果