css3的clip使用

之前看http://daneden.github.io/animate.css/网站源码发现css3有一个clip属性具体用法下面我粘贴了一段他的css:

/*-----------------------------------*\
  $HEADER
\*-----------------------------------*/
.site__title {
	font-size:100px;
	color: #f35626;
	background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 1s infinite linear;
}

/*-----------------------------------*\
  $ANIMATIONS
\*-----------------------------------*/

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
<h1 class="site__title">Animate.css</h1>

这里一共两个主要知识点
1、css3 clip的使用,可以实现渐变文字

background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

2、css3滤镜特效filter:hue-rotate(),可以实现绚丽的渐变动画

@-webkit-keyframes hue {
    from {-webkit-filter: hue-rotate(0deg);}
    to {-webkit-filter: hue-rotate(-360deg);}
}

我在使用中发现这个动画只是兼容webkit内核浏览器,于是复制了动画代码去掉-webkit-标识后火狐正常了,但是webkit内核不好使了,于是发现这个效果不能并存,至少目前没有找到解决办法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>