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>

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

<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.veimoz.com/185

css 字体

0 评论

3.5k

发表评论

随机推荐

小灯泡设计

形式在改初心不变

热门主题关于我们

热评文章

自媒体博客Spimes主题418 评论

Splity博客双栏主题189 评论

Spzac个人资讯下载类主题89 评论

Splinx博客图片主题35 评论

Spzhi知识付费社区主题34 评论

三栏清新博客S_blog主题30 评论

vCard主题个人简历主题29 评论

Pure轻简主题28 评论

最新评论

蔑视的士

3天前

支持

点都德

12月19日

：喷：：喜欢：：怒：：黑线：

YangY

12月5日

支持：滑稽：

Z.

11月29日

博主你好，Deng插件，这个点击不进去，提示这个（Warning: require_once(/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php): failed to open stream: No such file or directory in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26

Fatal error: require_once(): Failed opening required '/www/wwwroot/w.zzy2020.com/usr/plugins/Deng/Deng/html/profile.php' (include_path='.:/www/server/php/72/lib/php') in /www/wwwroot/w.zzy2020.com/Fresh/extending.php on line 26）

zizizi666

11月25日

这个字体叫方正雅士黑~搜一下然后下载就行了。