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内核不好使了,于是发现这个效果不能并存,至少目前没有找到解决办法。
转载请注明来源:前端老徐的博客
《css3的clip使用》
发表评论