利用css使文字渐变

久伴
久伴
久伴
640
文章
534
评论
2019年3月17日19:33:01 评论 608 952字阅读3分10秒
本博客加入QQ群就是这个效果,代码来至:青找博客英文名:Qing Zhao

效果图

利用css使文字渐变

HTML

<div class="masked"><p>
一个人真正优秀的特质来自于内心想要变得更加优秀的那种强烈的渴望,和对生命的追求那种火热的激情。
<br></p></div>

CSS

.masked p {
  display:block;
  /**width:355px;
  height:50px;**/
  /*渐变背景,此处为能无缝拼接的渐变 即0~100%*/   /*linear-gradient(线性渐变)*/
  background-image:-webkit-linear-gradient(left,#3498db,#f47920 10%,#d71345 20%,#f7acbc 30%,#ffd400 40%,#3498db 50%,#f47920 60%,#d71345 70%,#f7acbc 80%,#ffd400 90%,#3498db);
  color:transparent;
  /*文字填充色为透明*/
  -webkit-text-fill-color:transparent;
  -webkit-background-clip:text;
  /* background-clip 规定背景的绘制区域:*/   /*背景剪裁为文字,相当于用背景填充文字 CSS3新属性*/
  -webkit-background-size:200% 100%;
  /*背景图片向水平方向扩大一倍,这样background-position才有移动与变化的空间*/
  background-size:200% 100%;
  /* 动画 */
  -webkit-animation:masked-animation 4s infinite linear;
}
@keyframes masked-animation {
  0% {
  background-position:0 0;
  /*background-position 属性设置背景图像的起始位置。*/
}
100% {
  background-position:-100% 0;
}
}@-webkit-keyframes masked-animation {
  0% {
  background-position:0 0;
}
100% {
  background-position:-100% 0;
}
}
继续阅读
久伴
分享一下前端table表格自适应方案 HTML+CSS

分享一下前端table表格自适应方案

现在前端框架满天飞,bootstrap,mdui,meiziUI,element等等框架,使用框架自带的table类基本三二分钟就搞定一个自适应的table表格,但是实现的方案,大家了解吗 久伴在一次...
css自定义a标签下划线动画效果 HTML+CSS

css自定义a标签下划线动画效果

具体效果可以通过鼠标移动到本站文章中的超链接上面查看 鼠标移动到我查看效果 效果图演示 HTML代码 <p>Lorem ipsum dolor <a class="fancy-lin...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: