码迷,mamicode.com
首页 > 其他好文 > 详细

文字的跑马灯特效

时间:2018-11-19 11:05:00      阅读:326      评论:0      收藏:0      [点我收藏+]

标签:20px   背景   注意   lin   osi   使用动画   none   utf-8   code   

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

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

 

文字的跑马灯特效

标签:20px   背景   注意   lin   osi   使用动画   none   utf-8   code   

原文地址:https://www.cnblogs.com/growupup/p/9981553.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!