文字的跑马灯特效

发布时间：2020-12-14 04:30:22 所属栏目：大数据来源：网络整理

导读：上学时同学有个来电带跑马灯的手机，可把我羡慕坏了，可等我买的起手机时，跑马灯不流行了，甚伤萝卜心！今天就用CSS做个文字的跑马灯特效，缅怀一下本萝卜逝去的青春！道具：会敲代码的巧手、七窍玲珑心、会辩色的睿智双眼原理：文字底部放张背景图，文

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

今天就用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);
                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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!