CSS的奇淫巧技一光影效果

前言

越来越发现最难学的其实是CSS各类样式，这个专题会介绍一些CSS有趣好用的技巧。

奇淫巧技：汉语成语，拼音：qí jì yín qiǎo，意思是指新奇的技艺和作品。出自《书·泰誓下》

光影效果

先来看一段要实现的效果：

通常情况下，部分前端同学看到这个效果已经去喊UI同学出图了

但是其实可以使用动画来实现，下面是完整的实现流程供大家参考

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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光影效果</title>

    <style>
        .box {
            display: flex;
            justify-content: center;
            background: black; 
            height: 300px;
        }


        @keyframes changeColor {
            to{
                color: #ff0266;
            }
        }

        span {
            margin: 0 10px;
            font-size: 120px;
            color: #faebd7;
            animation: changeColor 1s infinite ease-in-out alternate;
        }

        span:nth-child(1) {
            animation-delay: 0s;
        }

        span:nth-child(2) {
            animation-delay: 0.2s;
        }

        span:nth-child(3) {
            animation-delay: 0.4s;
        }

        span:nth-child(4) {
            animation-delay: 0.6s;
        }

        span:nth-child(5) {
            animation-delay: 0.8s;
        }

        span:nth-child(6) {
            animation-delay: 1s;
        }

        span:nth-child(7) {
            animation-delay: 1.2s;
        }

        span:nth-child(8) {
            animation-delay: 1.4s;
        }

        span:nth-child(9) {
            animation-delay: 1.6s;
        }

        span:nth-child(10) {
            animation-delay: 1.8s;
        }


    </style>
</head>
<body>
    <div class="box">
        <span>H</span>
        <span>E</span>
        <span>L</span>
        <span>L</span>
        <span>O</span>
        <span>W</span>
        <span>O</span>
        <span>R</span>
        <span>L</span>
        <span>D</span>
    </div>


</body>
</html>

属性解释：

1、animation-name: changeColor

含义: 定义要使用的关键帧动画的名称。这个名称必须与定义的 @keyframes 规则中的名称匹配。

2、animation-duration: 1s

含义: 指定动画完成一个周期所需的时间，即持续时间。这里设为 1秒。

3、animation-iteration-count: infinite

含义: 定义动画的重复次数。infinite 意味着动画会无限次重复。

4、animation-timing-function: ease-in-out

含义: 控制动画速度曲线。ease-in-out 表示动画以较慢的速度开始，逐渐加速到中间，然后再逐渐减速。

可选值：

  • linear: 均匀速度
  • ease: 缓入缓出
  • ease-in: 缓入
  • ease-out: 缓出
  • ease-in-out: 缓入缓出
  • cubic-bezier(n, n, n, n): 自定义贝塞尔曲线

5、animation-direction: alternate

含义: 指定动画是否在每个周期反向播放。alternate 表示动画会正向和反向交替播放。

可选值：

  • normal: 每次播放从头到尾
  • reverse: 每次播放从尾到头
  • alternate: 交替从头到尾，再从尾到头
  • alternate-reverse: 交替从尾到头，再从头到尾

以上就是光影效果的实现和动画属性介绍，如果有下次我一定不找UI！