应用CSS3完成字体样式色调渐变色的⊙ω⊙完成

日期:2021-03-23 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

在应用Animation.css的情况下发觉它的官方网站字体样式会渐变色,看过一下他的css很趣味

  .site__title {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
  }
@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }
    to {
      -webkit-filter: hue-rotate(-360deg);
    }
  }

这儿应用 -webkit-background-clip: text 来剪裁情况照片只留有text的一部分

随后应用 -webkit-text-fill-color: transparent 来设定文本添充色调全透明

应用hue动漫,在60s内来调节色相从0deg到-360deg,就完成了字体样式色调随时随地间渐变色的实际效果

到此这篇有关应用CSS3完成字体样式色调渐变色的完成的文章内容就详细介绍到这了,大量有关CSS3字体样式色调渐变色內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!