首页 > 其他 > 详细

文字动态颜色变化效果

时间:2019-09-19 19:27:02      阅读:96      评论:0      收藏:0      [点我收藏+]

被你发现了,哈哈哈。这是一个有趣的小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>

 

文字动态颜色变化效果

原文:https://www.cnblogs.com/wxhhts/p/11551605.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!