中奖、游戏提示等文字滚动效果，css实现！

最新推荐文章于 2023-05-06 13:48:17 发布

芝芝龙

最新推荐文章于 2023-05-06 13:48:17 发布

阅读量1.1k

点赞数

分类专栏：技巧 css 文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44752723/article/details/125511173

版权

技巧同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

在这里插入图片描述
无聊的需求会提出什么样无聊的需求呢！还好咱会写！

<div class="cssmarquee">
    <div class="wrapper">
        <h3 class="marqueeWords">
            下班了，快回家吧！别再敲代码了，老婆会空虚的！下班了，快回家吧！别再敲代码了，老婆会空虚的！下班了，快回家吧！别再敲代码了，老婆会空虚的！
        </h3>
    </div>
</div>

css：

 body {
     width:900px;
     margin: auto;
 }
 .cssmarquee {
     position: relative;
     width: 100%;
     height: 40px;
     line-height: 40px;
     font-size: 24px;
     background: rgba(255, 255, 255, .6);
     overflow: hidden;
 }
 .cssmarquee .wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     animation: cssmarqueeWrapper 30s linear infinite;
 }
 .cssmarquee .marqueeWords {
     position: absolute;
     height: 100%;
     left: 0;
     top: 0;
     font-weight: bold;
     margin: 0;
     text-align: left;
     white-space: nowrap;
     transform:translateX(0);
     animation: cssmarquee 30s linear infinite;
 }
 @keyframes cssmarqueeWrapper {
     0% {
         transform: translateX(100%); /* parent 100% */
     }
     100% {
         transform: translateX(0);
     }
 }
 @keyframes cssmarquee {
     0% {
         transform: translateX(0);
     }
     100% {
         transform: translateX(-100%); /* words -100% */
     }
 }