css 流光字体

最新推荐文章于 2024-03-23 01:03:32 发布

杨杨得亿~

最新推荐文章于 2024-03-23 01:03:32 发布

阅读量1k

点赞数

文章标签： html5 css 前端

本文链接：https://blog.csdn.net/ys_dd/article/details/119607840

版权

本文探讨了如何使用CSS和Webkit动画创建一个具有渐变效果的背景，同时实现透明文字的显示。通过`-webkit-linear-gradient`和`-webkit-background-clip:text`属性，作者展示了如何为网页元素赋予动态视觉风格。

摘要由CSDN通过智能技术生成

效果图：

代码：

源码：

span {
    font-size: 22px;
    line-height: 50px;
    background-image: -webkit-linear-gradient(left, #f08080, #E6D205 25%, #f08080 50%, #E6D205 75%, #f08080);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: masked-animation 4s infinite linear;
}
@-webkit-keyframes masked-animation {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}