css字体特效,渐变颜色+动画效果

css属性中有一个background-clip,用于设置绘图的背景,它的值可以是content-box,padding-box,border-box,text,其中text就是把颜色绘制到文字上,还有一个属性是text-fill-color,它也是设置对象中文字的填充颜色,和color作用一样,它的优先级比color大,还有就是他的兼容性不太好,只适用于谷歌。靠这两个属性我们就可以设置好看的字体

<style>
.text{-webkit-background-clip: text;
    background-clip: text;
    background-image:linear-gradient(rgb(255,255,0),rgb(0,255,255));
    font-size: 20px;
    width:120px;
     -webkit-text-fill-color: transparent; 
}
</style>
<body>
    <p class="text">1234567</p>
</body>

20200414194559284.png

就是这样,再配合动画可以做出更好的效果

<style>
.text{-webkit-background-clip: text;
    width: 200%;
    background-clip: text;
    background-image:linear-gradient(-45deg,rgb(255,255,0),rgb(0,255,255));
    font-size: 20px;
    width:120px;
    animation: shine 2s infinite;
     background-blend-mode: hard-light; 
     background-size: 200%; 
     color: white;
     -webkit-text-fill-color: transparent; 
}
@keyframes shine {
    from {
        background-position: 100%;
    }
    to {
        background-position: 0;
    }
}
</style>
<body>
<p class='text'>123456</p>
</body>

background-blend-mode是背景层颜色的混合模式,hard-height是高亮,这样子字体颜色就会从左到右变换

文章由官网发布,如若转载,请注明出处:https://www.dpaoz.com/185
0 评论
2.4k

发表评论

嘿,我来帮您!