css3实现文字扫光渐变动画效果的示例_css文字效果

css3文字渐变

css3扫光效果

103 浏览量更新于2023-03-16 评论收藏 72KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

css3实现文字扫光渐变动画效果的示例实现文字扫光渐变动画效果的示例

主要介绍了css3实现文字扫光渐变动画效果的示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例，分享给大家，具体如下：

利用css3这个属性（背景剪裁）：

background-clip: border-box || padding-box || context-box || no-clip || text

本次用到的就是: -webkit-background-clip:text;

栗子：

1、

<style>

.masked{

text-align: center;

background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);

-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;}

}

</style>

<h1>→css3文字渐变动画效果 >></h1>

</div>

说明：

-webkit-text-fill-color: transparent;(这里必须填充透明颜色，这样渐变的颜色才会填充到文字上面，去掉这个或者填充别的颜色，效果不明显)

检索或设置对象中的文字填充颜色，若同时设置 <' text-fill-color '> 和 <' color '>，<' text-fill-color '> 定义的颜色将覆盖 <' color '> 属性；

效果：

2、跟第一个栗子差不多，多给了一个背景颜色，从局部到全局渐变

.slideShine{

background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;

background-size:20% 100%;

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

font-size: 36px;

text-align: center;

font-weight: bold;

text-decoration: underline;

}

.slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}

@-webkit-keyframes slideShine {

0% {

background-position: 0 0;

}

100% {

background-position: 100% 100%;

}

@keyframes slideShine {

0% {background-position: 0 0; }

100% {background-position: 100% 100%; }

}

<p class="slideShine" >→css3文字渐变动画效果 >></p>

效果：

3、用webkit遮罩来实现文字渐变动画

.text{position: relative;width: 57%;max-width:531px ;}

.text .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 0;-webkit-mask-image: url(img/text.png);}

.text .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;}

@keyframes lightLine1{

0%{transform:translateX(0) ;}

100%{transform:translateX(500%);}

}

@-webkit-keyframes lightLine1{

0%{-webkit-transform:translateX(0) ;}

100%{-webkit-transform:translateX(500%) ;}

}

</div>

效果：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载