TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

CSS实现文字滚动

醉书生站长
1个月前
0 评论
75 阅读
检测收录...
05/08
本文最后更新于2021年05月08日,已超过41天没有更新,若内容或图片失效,请留言反馈。

以前用marquee来插入一段滚动的文字。但是<marquee>元素已经过时,请不要再使用(很多网站如是说,非吾说)。
本文分享比较好看的CSS关于文字可以上下滚动的炫酷代码,样式很好看值得推荐!

<!--CSS文字滚动-->
 <meta charset="UTF-8">
<style>
    .menu-list {
    list-style:none;
    width:300px;
    margin:100px auto;
}
.menu-list li {
    display:block;
}
.list {
    list-style:none;
    margin-left:-50px;
    width:300px;
    height:60px;
    overflow:hidden;
}
.list li {
    width:300px;
    height:60px;
    position:relative;
    animation:myfirst 4s infinite;
    line-height:60px;
    text-align:center;
    font-size:30px;
    color:#fff;
}
@keyframes myfirst {
    0% {
    background-color:#4ec7f3;
    top:0px;
}
25% {
    background-color:#4ec7f3;
    top:0px;
}
50% {
    background:#42c58a;
    top:-60px;
}
75% {
    background:#a0a0a0;
    top:-120px;
}
100% {
    background:#dc143c;
    top:-180px;
}
}.font30 {
    font-size:30px;
    color:#7d7d7d;
}

</style>
<ul class="menu-list">
    <li>
        <p class="font30">今天怎么样?</p>
    </li>
    <li>
        <ul class="list">
            <li class="one">尘遇博客怎么样</li>
            <li class="two">very good!</li>
            <li class="three">学习一下</li>
            <li class="four">nice!</li>

        </ul>
    </li>
    <li>
        <p class="font30">尘遇</p>
    </li>
</ul>
本文共92个字数,您已阅读:平均阅读时长≈1分钟。
CSS
朗读
点赞
5
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 05 月 08 日 09 : 02 AM

本文链接:

https://chenyu.me/1381.html(转载时请注明本文出处及文章链接)

暂无评论