CSS3：动画（持续更新）

汤姆不是猫 ... 2021-10-18

CSS
动画

大约 3 分钟

# 动画1：躁动

<div>啊啊啊啊啊啊啊啊</div>

div {
    text-align: center;
    font-size: 20px;
    animation: shake-slow 5s ease-in-out infinite;
}

@keyframes shake-slow {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    2% {
        transform: translate(6px, -7px) rotate(2.5deg);
    }
    4% {
        transform: translate(8px, -8px) rotate(2.5deg);
    }
    6% {
        transform: translate(1px, -8px) rotate(-3.5deg);
    }
    8% {
        transform: translate(-3px, 4px) rotate(-0.5deg);
    }
    10% {
        transform: translate(0px, -3px) rotate(1.5deg);
    }
    12% {
        transform: translate(-1px, 2px) rotate(0.5deg);
    }
    14% {
        transform: translate(6px, 6px) rotate(-1.5deg);
    }
    16% {
        transform: translate(-7px, 4px) rotate(-0.5deg);
    }
    18% {
        transform: translate(7px, 8px) rotate(-3.5deg);
    }
    20% {
        transform: translate(-6px, 2px) rotate(1.5deg);
    }
    22% {
        transform: translate(9px, 5px) rotate(-1.5deg);
    }
    24% {
        transform: translate(7px, -2px) rotate(0.5deg);
    }
    26% {
        transform: translate(-7px, -10px) rotate(-0.5deg);
    }
    28% {
        transform: translate(-10px, -8px) rotate(-1.5deg);
    }
    30% {
        transform: translate(8px, 4px) rotate(0.5deg);
    }
    32% {
        transform: translate(0px, 4px) rotate(1.5deg);
    }
    34% {
        transform: translate(-8px, 6px) rotate(-0.5deg);
    }
    36% {
        transform: translate(-5px, 7px) rotate(1.5deg);
    }
    38% {
        transform: translate(-4px, -4px) rotate(-1.5deg);
    }
    40% {
        transform: translate(9px, 4px) rotate(-1.5deg);
    }
    42% {
        transform: translate(9px, -5px) rotate(2.5deg);
    }
    44% {
        transform: translate(-5px, -4px) rotate(-2.5deg);
    }
    46% {
        transform: translate(7px, -7px) rotate(1.5deg);
    }
    48% {
        transform: translate(-5px, 8px) rotate(0.5deg);
    }
    50% {
        transform: translate(9px, 1px) rotate(-1.5deg);
    }
    52% {
        transform: translate(-9px, -5px) rotate(-3.5deg);
    }
    54% {
        transform: translate(-2px, 9px) rotate(1.5deg);
    }
    56% {
        transform: translate(6px, -1px) rotate(1.5deg);
    }
    58% {
        transform: translate(-6px, 0px) rotate(-0.5deg);
    }
    60% {
        transform: translate(3px, 1px) rotate(1.5deg);
    }
    62% {
        transform: translate(5px, -7px) rotate(-0.5deg);
    }
    64% {
        transform: translate(9px, 2px) rotate(2.5deg);
    }
    66% {
        transform: translate(6px, 0px) rotate(-2.5deg);
    }
    68% {
        transform: translate(5px, -4px) rotate(-2.5deg);
    }
    70% {
        transform: translate(-8px, 5px) rotate(-2.5deg);
    }
    72% {
        transform: translate(-6px, -2px) rotate(0.5deg);
    }
    74% {
        transform: translate(-3px, 7px) rotate(-3.5deg);
    }
    76% {
        transform: translate(-7px, -8px) rotate(-3.5deg);
    }
    78% {
        transform: translate(-1px, -2px) rotate(2.5deg);
    }
    80% {
        transform: translate(8px, 6px) rotate(-2.5deg);
    }
    82% {
        transform: translate(-2px, -9px) rotate(2.5deg);
    }
    84% {
        transform: translate(8px, -10px) rotate(-0.5deg);
    }
    86% {
        transform: translate(-6px, 0px) rotate(2.5deg);
    }
    88% {
        transform: translate(-1px, 9px) rotate(-3.5deg);
    }
    90% {
        transform: translate(-7px, 8px) rotate(1.5deg);
    }
    92% {
        transform: translate(-10px, -8px) rotate(0.5deg);
    }
    94% {
        transform: translate(-8px, 6px) rotate(1.5deg);
    }
    96% {
        transform: translate(4px, -9px) rotate(2.5deg);
    }
    98% {
        transform: translate(-4px, 9px) rotate(0.5deg);
    }
}

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158

# 动画2：反馈

<a href="#" class="feedback">Wow!</div>

.feedback {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    color: #333;
    background: rgba(255, 255, 255, .1);
    border: 2px solid #b6c0e2;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.feedback:after {
    content: '';
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    background: #b6c0e2;
    transition: transform .2s, opacity .3s;
}
.feedback:hover::after {
    transform: scale(1.3);
    opacity: 0;
}

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

# 动画3：倾斜

<div class="container">
    <div class="box-item">
        倾斜
    </div>
</div>

1
2
3
4
5

.code-demo-app {
    text-align: center;
}

.container {
    perspective: 800px;
    display: inline-block;
}

.box-item {
    width: 200px;
    height: 80px;
    position: relative;
    transform-style: preserve-3d;
    background: #5cbcf6;
    transition: all 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-item:hover {
    transform: rotateX(-20deg);
}

.box-item:after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 40%;
    left: 0;
    top: -40%;
    background: #49a7df;
    transition: all 0.3s;
    transform-origin: 0% 100%;
    transform: rotateX(90deg);
}

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

# 动画4：按钮

<button class="custom-btn btn-11">按钮</button>

1
2

.custom-btn {
    width:130px;
    height:40px;
    color:#fff;
    border-radius:50px;
    padding:10px 25px;
    font-size:16px;
    margin: 0 auto;
    background:transparent;
    cursor:pointer;
    transition:all .3s ease;
    position:relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:inset 2px 2px 2px 0 rgba(255, 255, 255, .5), inset -7px -7px 10px 0 rgba(0, 0, 0, .1), 7px 7px 20px 0 rgba(0, 0, 0, .1), 4px 4px 5px 0 rgba(0, 0, 0, .1);
    text-shadow:2px 2px 3px rgba(255, 255, 255, .5), -4px -4px 6px rgba(116, 125, 136, .2);
    outline:0
}
.btn-11 {
    border:0;
    background:linear-gradient(0deg, rgba(251, 33, 117, 1) 0, rgba(234, 76, 137, 1) 100%);
    color: #fff;
    overflow:hidden;
}
.btn-11:hover {
    text-decoration:none;
    color: #fff;
}
.btn-11:before {
    position:absolute;
    content:'';
    display:inline-block;
    top:-180px;
    left:0;
    width:30px;
    height:100%;
    background-color:#fff;
    animation:shiny-btn 3s ease-in-out infinite
}
.btn-11:hover {
    opacity:.7
}
.btn-11:active {
    box-shadow:4px 4px 6px 0 rgba(255, 255, 255, .3), -4px -4px 6px 0 rgba(116, 125, 136, .2), inset -4px -4px 6px 0 rgba(255, 255, 255, .2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2)
}

@-webkit-keyframes shiny-btn {
    0% {
        -webkit-transform:scale(0) rotate(45deg);
        opacity:0
    }
    80% {
        -webkit-transform:scale(0) rotate(45deg);
        opacity:.5
    }
    81% {
        -webkit-transform:scale(4) rotate(45deg);
        opacity:1
    }
    100% {
        -webkit-transform:scale(50) rotate(45deg);
        opacity:0
    }
}

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

CSS3：动画（持续更新）

# 动画1：躁动

# 动画2：反馈

# 动画3：倾斜

# 动画4：按钮

详情