|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
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 这个爸爸要改变自己提供的场所:宽度够了就好,高度要设定一个合适的值。
|
评分
-
| 参与人数 3 | 威望 +110 |
金钱 +220 |
经验 +110 |
收起
理由
|
绿叶清舟
| + 30 |
+ 60 |
+ 30 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
赞一个! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|