前言

说起渐变、动画等词汇随手就是 gif，感觉被禁锢住了，这都 3202 年了还在用 gif。

进去大神的博客找了一些关于 CSS 动画效果，果然之前模糊的印象是存在的，找到了一篇关于 webkit-linear-gradient 的博客。

正主

来点效果

color
中国·泉州 / 海上丝绸之路的起点

直接上内容：

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
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>color</title>
    <style type="text/css">
        html {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .bar-title {
            display: inline-block;
            color: green;
            font-size: 3em;
            font-family: '微软雅黑', sans-serif;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
            .bar-title {
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                background-image: -webkit-linear-gradient(top left, #028fff, #0ecfa8 25%, #028fff 50%, #0ecfa8 75%, #147B96);
                background-size: 200% 100%;
                -webkit-animation: masked-animation 3s infinite linear;
            }
        }

        @-webkit-keyframes masked-animation {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -100% 0;
            }
        }
    </style>
</head>
<body>
<div class="bar-title">中国·泉州 / 海上丝绸之路的起点</div>
</body>
</html>

附录

  • @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { }
    这个查询只对 webkit/blink 内核浏览器有效，可以避免对其他浏览器的污染。但是呢，.masked 对应的所有 CSS 声明都有
    webkit 私有前缀，因此，这里的查询过滤器实际上是多余的。不过，您可以收藏下，说不定您以后就会需要这个玩具。

  • 我这里渐变需要分成了 4 段，主要是为了动画循环的时候可以无缝拼接，更显自然流畅值本色。

  • background-size: 200% 100%; 让背景图片大小水平方向扩大一倍，这样 background-position 才有移动与变化的空间。

  • background-clip 实际上是 CSS3 中的标准属性，有 content, padding 等值。但是，这里的 text
    却是私人珍藏玩具，其他浏览器搞不来，也不在规范之中。