文字动态颜色变化效果

被你发现了,哈哈哈。这是一个有趣的小Demo哇。

 鼠标左键键扫描选中上面区域查看效果

 

.gradient-text {
    background-image: linear-gradient(90deg, $red, $orange);
    background-clip: text;
    line-height: 60px;
    font-size: 60px;
    animation: hue 5s linear infinite;
    -webkit-text-fill-color: transparent;
}
@keyframes hue {
    from {
        filter: hue-rotate(0);
    }
    to {
        filter: hue-rotate(-1turn);
    }
}


<div class="bruce flex-ct-x">
    <h1 class="gradient-text">Full Stack Developer</h1>
</div>

 

posted @ 2019-09-19 18:24  我喜欢喝糖水  阅读(383)  评论(0编辑  收藏  举报
我喜欢喝糖水的博客友链:股票指标编程学习