文字动态颜色变化效果

守給你的承諾、 提交于 2019-11-30 03:26:38

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

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!