background-clip的使用技巧

前言

关于 background-clip 这个 css3 的属性，其实早在 2011 年，国内最早接触和研究 CSS3 的大漠前辈已经介绍得很详细了（传送门）这里就不多做介绍了，不过当时只讲解了border-box,padding-box,content-box。今天我要讲的是 background-clip 的另外一个属性text，这个属性非常有意思，不过能把它运用到什么样的程度，完全取决个人的创意和能力。比如下面这个效果（请用高级浏览器打开）。

点击进入 屌炸天效果
效果是不是很赞呢？那到底是怎么实现的呢？

怎样实现

直接上代码

1
<h1>前端小栈</h1>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
body {
  background-color: #000;
}

h1 {
  text-align: center;
  font-size: 240px;
  background: url('../images/repeat-white.png') center center repeat;
  background-size: 80px 60px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: ani-h1 0.253s linear forwards infinite;
  animation: ani-h1 0.253s linear forwards infinite;
}

@-webkit-keyframes ani-h1 {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 0 0;
  }
  26% {
    background-position: 20px -20px;
  }
  50% {
    background-position: 20px -20px;
  }
  51% {
    background-position: 40px -40px;
  }
  75% {
    background-position: 40px -40px;
  }
  76% {
    background-position: 60px -60px;
  }
  99% {
    background-position: 60px -60px;
  }
  100% {
    background-position: 0 0;
  }
}

从代码可以看出，我们先设置了一张自定义背景 repeat-white.png。是的，这里出现了一个比较陌生的属性：-webkit-background-clip,即指定对象的背景图像向外裁剪的区域，那么-webkit-background-clip: text就是按文字的区域裁剪。这样我们就得到文字的区域了，然后把文字设置成透明的，我这里用-webkit-text-fill-color: transparent，其实用color: transparent也可以，最后我们看到文字就是由图片填充的。如果我们想给文字加点动画什么的，可以利用动画 animation 设置背景的 position。

注意

  • 注意-webkit-background-clip:text兼容性，目前网上的说法参差不齐，caniuse也没有给出兼容性说明。
  • background一定要写在-webkit-background-clip前面，否则无效。

[本文谢绝转载，谢谢]

分类: 技术
粤ICP备2022084378号