纯CSS3实现文字彩色动态渐变

董舒文 2020-07-16 PM 619℃ 0条

纯CSS3实现文字彩色动态渐变

先看一下效果噢:

 人生在世,草木一秋。一闪一灭,转瞬之间。你我都轻如云烟,渺如微尘。但就是无数个小小的你我点燃了万家灯火,照亮了整个世界。这人间的生与死,荣与辱,兴与衰,从来都让人无法左右,但我们终不负韶光,不负自己,守着草木,守着云水,演绎着一代又一代的传奇。
  我们一路怀揣着爱,脚踏着万物,一声绝唱,飘然落尘!也许,你我曾是几百年前的一株草,一朵花,一粒尘,经过几世轮回的转换变成了今生的亲人,朋友,爱人……也许,我们只是来兑现前世的一场盟约。也许,在百年之后,你我又都化为世间的生灵,守候在天地之间,彼此相望,相顾无言。然而,你我却心灵相犀,甘为绿叶,守护着这世间一朵花开的时光!

代码如下:
html代码

    <div class="masked">
        <p>
 人生在世,草木一秋。一闪一灭,转瞬之间。你我都轻如云烟,渺如微尘。但就是无数个小小的你我点燃了万家灯火,照亮了整个世界。这人间的生与死,荣与辱,兴与衰,从来都让人无法左右,但我们终不负韶光,不负自己,守着草木,守着云水,演绎着一代又一代的传奇。
<br>
  我们一路怀揣着爱,脚踏着万物,一声绝唱,飘然落尘!也许,你我曾是几百年前的一株草,一朵花,一粒尘,经过几世轮回的转换变成了今生的亲人,朋友,爱人……也许,我们只是来兑现前世的一场盟约。也许,在百年之后,你我又都化为世间的生灵,守候在天地之间,彼此相望,相顾无言。然而,你我却心灵相犀,甘为绿叶,守护着这世间一朵花开的时光!
        </p>
    </div>

css代码:

<style>
@keyframes masked-animation{
    0% {background-position: 0 0;}
    100% {background-position: -100% 0;}
}
.masked p{
    display: block;
    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-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-size: 200% 100%;
    animation: masked-animation 4s infinite linear;
}
</style>
标签: Css

非特殊说明,本博所有文章均为博主原创,部分搬运。

评论已关闭