文字的跑马灯特效

Posted growupup

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了文字的跑马灯特效相关的知识,希望对你有一定的参考价值。

上学时同学有个来电带跑马灯的手机,可把我羡慕坏了,可等我买的起手机时,跑马灯不流行了,甚伤萝卜心!

今天就用CSS做个文字的跑马灯特效,缅怀一下本萝卜逝去的青春!

道具:会敲代码的巧手、七窍玲珑心、会辩色的睿智双眼

原理:文字底部放张背景图,文字color设为透明(color:tranparent;),设置渐变色背景图(

background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);

),设置背景的绘制区域为text(-webkit-background-clip:text;),然后使用动画不停移动背景图

bingo!!!!

效果图
技术分享图片

代码

<html>  
    <head> 
        <meta charset="UTF-8">
        <!--<script>less.watch();</script>-->
        <style>
            .title {
                display: block;
                text-decoration: none;
                text-align: center;
                line-height: 1.5;
                margin: 20px 0px;
                background-image: -webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
                color: transparent;
                -webkit-background-clip: text;
                background-size: 200% 100%;
                -webkit-animation: slide 2s infinite linear;
                animation: slide 5s infinite linear;
                font-size: 40px;
            }
            @keyframes slide {
                0%  {
                  background-position: 0 0;
                }
                100% {
                  background-position: -100% 0;
                }
            }
        </style>
    </head>
    <body> 
        <p class="title">
             为了引起你的注意,我真是煞费苦心
        </p>
    </body>  
</html>

 


以上是关于文字的跑马灯特效的主要内容,如果未能解决你的问题,请参考以下文章

jQuery+CSS3文字跑马灯特效

如何用纯 CSS 创作一个 3D 文字跑马灯特效

一行文字跑马灯怎样用Jquery或js做?

微信小程序-实现文字跑马灯-wepy

VUE之文字跑马灯效果

JS实战:仿LED跑马灯效果