学习定有收获
努力成为大神

WordPress 子比zibill主题给文章标题文字添加彩色渐变效果

WordPress 原创插件 国人习惯、简约实用、容易上手【点击了解】

鼠标悬停在文章列表的文章标题上时标题文字会呈现彩色渐变效果,给网站标题加点彩色,这是一个非常不错的一个美化样式,可以给自己的网站标题加点色彩!!

/*文章标题加上渐变彩色文字 开始*/
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: -100% 0
  }
}
/*文章标题加上渐变彩色文字 结束*/

第二个代码两个都可以

/*文章标题阅读彩色样式*/
.pink{background-color:#777777 !important;}
@media screen and (min-width: 680px){.joe_div{background: url(https://cdn.7uun.com/bq.png) right 10px bottom 10px no-repeat;background-size: 12%;}}
.joe_div{color:#989898;word-break: break-all;line-height: 25px;border-radius: 10px;border: 1px solid #777777;padding: 28px 14px 14px 14px;}
.item-heading :hover,
.text-ellipsis :hover,
.text-ellipsis-2 :hover,
.links-lists :hover {
  background-image: -webkit-linear-gradient(30deg, #32c5ff 25%, #b620e0 50%, #f7b500 75%, #20e050 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: maskedAnimation 4s infinite linear;
}
@keyframes maskedAnimation {
  0% {
    background-position: 0 0
  }
  100% {
    background-position: -100% 0
  }
}
/*文章标题阅读彩色样式结束*/
内容仅供参考:大神建站 - WordPress插件开发 » WordPress 子比zibill主题给文章标题文字添加彩色渐变效果

评论 2

  1. #-9

    签到,文章质量杠杠,像钢铁战士!

  2. #-8

    写得太精彩,感觉智商都跟着提升了,受益啦!

登录

找回密码

注册