css常见动画

1、音乐播放效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作竖条加载动画</title>
	<style>
		.animbox {
		    margin: 50px auto;
		    width: 200px;
		    text-align: center;
		}
		/*设置各竖条的共有样式*/
		.animbox > div {
		    background-color: #279fcf;
		    width: 4px;
		    height: 35px;
		    border-radius: 2px;
		    margin: 2px;
		    animation-fill-mode: both;
		    display: inline-block;
		    animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
		}
		/*设置动画延迟*/
		.animbox > :nth-child(2), .animbox > :nth-child(4) {
		    animation-delay: 0.25s !important;
		}

		.animbox > :nth-child(1), .animbox > :nth-child(5) {
		    animation-delay: 0.5s !important;
		}
		/*定义动画*/
		@keyframes anim {
		    0% {  transform: scaley(1); }
		    80% {  transform: scaley(0.3); }
		    90% {  transform: scaley(1);   }
		}
	</style>
</head>
<body>
	<div class="animbox">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>


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

2、电影闭幕效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .box {
        height: 100%;
        width: 100%;
        position: absolute;
        background: url("https://img0.baidu.com/it/u=2771945787,9120044&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500")
          no-repeat;
        background-size: cover;
        animation: fade-away 3s linear forwards;
      }
      .text {
        position: absolute;
        line-height: 55px;
        color: #fff;
        font-size: 36px;
        text-align: center;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        animation: show 2s cubic-bezier(0.74, -0.1, 0.86, 0.83) forwards;
      }

      @keyframes fade-away {
        30% {
          filter: brightness(1);
        }
        100% {
          filter: brightness(0);
        }
      }
      @keyframes show {
        20% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
      <div class="text">
        <p>电影闭幕效果</p>
      </div>
    </div>
  </body>
</html>

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

3、箭头动效

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      body {
        background: #222;
      }

      .arrow {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: translate3d(-50%, -50%, 0);
        transform: translate3d(-50%, -50%, 0);
      }

      .arrow-1 {
        -webkit-animation: arrow-movement 2s ease-in-out infinite;
        animation: arrow-movement 2s ease-in-out infinite;
      }

      .arrow-2 {
        -webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
        animation: arrow-movement 2s 1s ease-in-out infinite;
      }

      .arrow:before,
      .arrow:after {
        background: #fff;
        content: "";
        display: block;
        height: 3px;
        position: absolute;
        top: 0;
        left: 0;
        width: 30px;
      }

      .arrow:before {
        -webkit-transform: rotate(45deg) translateX(-23%);
        transform: rotate(45deg) translateX(-23%);
        -webkit-transform-origin: top left;
        transform-origin: top left;
      }

      .arrow:after {
        -webkit-transform: rotate(-45deg) translateX(23%);
        transform: rotate(-45deg) translateX(23%);
        -webkit-transform-origin: top right;
        transform-origin: top right;
      }

      @-webkit-keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }

      @keyframes arrow-movement {
        0% {
          opacity: 0;
          top: 45%;
        }
        70% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="arrow arrow-1"></div>
    <div class="arrow arrow-2"></div>
  </body>
</html>
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

4、按钮心跳效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      /* 按钮心跳动画 */
      .heart-shake {
        width: 100px;
        height: 30px;
        margin: auto;
        border-radius: 10px;
        background: #3866ff;
        color: #ffffff;
        box-shadow: 0 2px 30px 0 #3866ff63;
        animation: submitBtn 1.5s ease infinite;
      }
      @keyframes submitBtn {
        0% {
          transform: scale(1);
        }
        50% {
          transform:scale3d(.8,.8,.8);
        }
        100% {
          transform: scale(1);
        }
      }
    </style>
  </head>
  <body>
    <div class="heart-shake ege">按钮心跳动画</div>
  </body>
</html>
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

5、水波扩散效果加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作水波扩散效果加载动画</title>
	<style>
		.ball{
		    width: 100px;
		    height: 100px;
		    margin: 50px auto;
		    position: relative;
		    transform: translateY(-30px);
		}

		.ball> div {          /*设置水波纹的样式*/
		    background-color: #279fcf;
		    border-radius: 100%;
		    margin: 2px;
		    position: absolute;
		    left: 15px;
		    top: 15px;
		    opacity: 0;
		    width: 60px;
		    height: 60px;
		    animation: anim 1s 0s linear infinite both;
		}
		.ball > div:nth-child(2) {        /*设置动画延迟*/
		    animation-delay: 0.2s;
		}
		/*此处省略设置第三个和第四个圆圈的动画延迟的代码*/
		.ball> div:nth-child(3) {
		    animation-delay: 0.4s;
		}

		.ball > div:nth-child(4) {
		    animation-delay: 0.6s;
		}

		@keyframes anim {
		    0% {transform: scale(0);
		        opacity: 0; }
		    5% {opacity: 1; }
		    100% {transform: scale(1);
		           opacity: 0; }
		}
	</style>
</head>
<body>
	<div class="ball">
	    <div></div>
	    <div></div>
	    <div></div>
	    <div></div>
	</div>
</body>
</html>

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

6、环形加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>环形加载动画</title>
	<style>
		/*css document*/
		* {
		    margin: 0;
		    padding: 0;
		}


		body {
		    background: #ffefce;
		}


		.cont {
		    width: 100px;
		    height: 100px;
		    position: relative;
		    margin: 100px auto;
		}
		.line div {
		    position: absolute;
		    left: 0;
		    top: 0;
		    width: 4px;
		    height: 100px;
		}


		.line div:before, .line div:after {
		    content: '';
		    display: block;
		    height: 50%;
		    background: #009cda;
		    border-radius: 5px;
		}

		/*设置组成环形加载的竖条的旋转角度*/
		.line div:nth-child(2) {
		    transform: rotate(15deg);
		}


		.line div:nth-child(3) {
		    transform: rotate(30deg);
		}


		.line div:nth-child(4) {
		    transform: rotate(45deg);
		}


		.line div:nth-child(5) {
		    transform: rotate(60deg);
		}

		.line div:nth-child(6) {
		    transform: rotate(75deg);
		}
		.line div:nth-child(7) {
		    transform: rotate(90deg);
		}


		.line div:nth-child(8) {
		    transform: rotate(105deg);
		}


		.line div:nth-child(9) {
		    transform: rotate(120deg);
		}


		.line div:nth-child(10) {
		    transform: rotate(135deg);
		}

		.line div:nth-child(11) {
		    transform: rotate(150deg);
		}
		.line div:nth-child(12) {
		    transform: rotate(165deg);
		}

		.circle {
		    position: absolute;
		    left: -15%;
		    top: 35%;
		    width: 50px;
		    height: 50px;
		    margin: -9px 0 0 -9px;
		    background: #ffefce;
		    border-radius: 100%;
		}

		/*定义动画*/
		@keyframes load {
		    0% {
		        opacity: 0;
		    }
		    100% {
		        opacity: 1;
		    }
		}
		/*设置动画以及动画延迟 */
		.line div:nth-child(1):before {
		    animation: load 1.2s linear 0s infinite;
		}
		/*依次从第一个div的:before至最后一个div的:before的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):before {
		    animation: load 1.2s linear 0.05s infinite;
		}

		.line div:nth-child(3):before {
		    animation: load 1.2s linear 0.1s infinite;
		}

		.line div:nth-child(4):before {
		    animation: load 1.2s linear 0.15s infinite;
		}

		.line div:nth-child(5):before {
		    animation: load 1.2s linear 0.2s infinite;
		}

		.line div:nth-child(6):before {
		    animation: load 1.2s linear 0.25s infinite;
		}

		.line div:nth-child(7):before {
		    animation: load 1.2s linear 0.3s infinite;
		}

		.line div:nth-child(8):before {
		    animation: load 1.2s linear 0.35s infinite;
		}

		.line div:nth-child(9):before {
		    animation: load 1.2s linear 0.4s infinite;
		}

		.line div:nth-child(10):before {
		    animation: load 1.2s linear 0.45s infinite;
		}

		.line div:nth-child(11):before {
		    animation: load 1.2s linear 0.5s infinite;
		}

		.line div:nth-child(12):before {
		    animation: load 1.2s linear 0.55s infinite;
		}

		.line div:nth-child(1):after {
		    animation: load 1.2s linear 0.6s infinite;
		}
		/*依次从第一个div的:after至最后一个div的:after的动画延迟为每个增加0.05s,此处省略雷同代码*/
		.line div:nth-child(2):after {
		    animation: load 1.2s linear 0.65s infinite;
		}

		.line div:nth-child(3):after {
		    animation: load 1.2s linear 0.7s infinite;
		}

		.line div:nth-child(4):after {
		    animation: load 1.2s linear 0.75s infinite;
		}

		.line div:nth-child(5):after {
		    animation: load 1.2s linear 0.8s infinite;
		}

		.line div:nth-child(6):after {
		    animation: load 1.2s linear 0.85s infinite;
		}

		.line div:nth-child(7):after {
		    animation: load 1.2s linear 0.9s infinite;
		}

		.line div:nth-child(8):after {
		    animation: load 1.2s linear 0.95s infinite;
		}

		.line div:nth-child(9):after {
		    animation: load 1.2s linear 1.0s infinite;
		}

		.line div:nth-child(10):after {
		    animation: load 1.2s linear 1.05s infinite;
		}

		.line div:nth-child(11):after {
		    animation: load 1.2s linear 1.1s infinite;
		}

		.line div:nth-child(12):after {
		    animation: load 1.2s linear 1.15s infinite;
		}
	</style>
</head>
<body>
<div class="cont">
  <div class="line">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
  <div class="circle"></div>
</div>
</body>
</html>

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229

7、制作小圆圈轮流放大的加载动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>制作小圆圈轮流放大的加载动画</title>
	<style>
/*css document*/
* { /*清除页面中默认的内外边距*/
    padding: 0;
    margin: 0;
}

.ball { /*设置动画盒子的整体样式*/
    width: 240px; /*设置整体大小*/
    height: 90px;
    text-align: center; /*设置对齐方式*/
    color: #fff; /*设置文字颜色*/
    background: rgba(0, 0, 0, 0.5); /*设置背景颜色*/
    margin: 20px auto;
}

.ball > p { /*设置加载的提示文字的样式*/
    padding: 20px 0;
}

.ball > div { /*设置动画中三个小球的样式*/
    width: 18px; /*设置大小*/
    height: 18px;
    background: #1abc9c; /*设置背景颜色*/
    border-radius: 100%; /*设置圆角边框*/
    display: inline-block; /*设置其显示方式*/
    animation: move 1.4s infinite ease-in-out both; /*添加动画*/
}

.ball .ball1 { /*设置第一个小球的动画延迟*/
    animation-delay: 0.16s;
}

.ball .ball2 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.32s;
}

.ball .ball3 { /*设置第二个小球的动画延迟*/
    animation-delay: 0.48s;
}

@keyframes move { /*创建动画*/
    0% { transform: scale(0) }
    40% { transform: scale(1.0) }
    100% { transform: scale(0) }
}

	</style>
</head>
<body>
	<div class="cont">
	    <div class="ball">
	        <p>正在加载,请稍后~</p>
	        <div class="ball1"></div>
	        <div class="ball2"></div>
	        <div class="ball3"></div>
	    </div>
	</div>
</body>
</html>

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

8、椭圆形进度条加载

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>椭圆形进度条加载</title>
	<style>
		.cont {
		    margin: 50px auto;
		}

		.cont, p {
		    width: 300px;
		    height: 20px;
		    border-radius: 10px;
		    position: relative;
		    background-color: rgba(189, 189, 189, 1);
		}

		#bar {
		    background-color: #0e90d2;
		    width: 0;
		    animation: prog 1 5s ease forwards;
		}
		/*进度提示数字展示*/
		#txt {
		    position: absolute;
		    left: 250px;
		    width: 50px;
		    font: bold 18px/20px "";
		    color: #f00;
		}
		/*蓝色逐渐向右填充动画*/
		@keyframes prog {
		    0% {
		        width: 0px;
		    }
		    100% {
		        width: 300px;
		    }
		}
	</style>
</head>
<body>
<div class="cont">
    <p id="bar"><span id="txt">0%</span></p>
</div>
<script type="text/javascript">
	window.onload=function(){
	    var i = 0;
	    var txt = document.getElementById("txt");
	    var ds = setInterval(function(){
	        i++;
	        txt.innerHTML = i + "%";
	        // console.log(i)
	        if (i == 100) {
	            clearInterval(ds)
	        }
	    }, 50)
	}
</script>
</body>
</html>
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

9、文字轮播滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文字轮播滚动</title>
	<style>
		   .marquee-outer-wrapper {
            overflow: hidden;
            width: 100%;
        }
        
        .marquee-inner-wrapper {
            background: #eee;
            height: 40px;
            font-size: 14px;
            color: red;
            line-height: 40px;
            margin: 0 auto;
            white-space: nowrap;
            position: relative;
        }
        /* 需要将两个文字内容一样的span放在最右边 */
        
        .marquee-inner-wrapper span {
            position: absolute;
            top: 0;
            left: 100%;
            height: 100%;
        }
        /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
        
        .first-marquee {
            -webkit-animation: 25s first-marquee linear infinite normal;
            animation: 25s first-marquee linear infinite normal;
            padding-right: 70%;
        }
        
        @keyframes first-marquee {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            /* 向左移动 */
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
        
        .second-marquee {
            /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
            -webkit-animation: 25s first-marquee linear 12s infinite normal;
            animation: 25s first-marquee linear 12s infinite normal;
            padding-right: 53%;
        }
        
        @keyframes second-marquee {
            0% {
                -webkit-transform: translate3d(0%, 0, 0);
                transform: translate3d(0%, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(-200%, 0, 0);
                transform: translate3d(-200%, 0, 0);
                display: none;
            }
        }
	</style>
</head>
<body>
<div class="marquee-outer-wrapper">
        <div class="marquee-inner-wrapper">
            <span class="first-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
            <span class="second-marquee">使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span>
        </div>
    </div>
</body>
</html>

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

相关阅读:
【rust】7、命令行程序实战：std::env、clap 库命令行解析、anyhow 错误库、indicatif 进度条库
 三万字带你了解那些年面过的Java八股文
 QT 布局垂直居中【比例放大缩小仍然居中】
深度学习编译器
 【图像误差测量】测量 2 张图像之间的差异，并测量图像质量（Matlab代码实现）
Kotlin学习笔记-Kotlin基础-01
关于ActiveMQ的demo
101页4万字数字孪生能源互联网智慧能源物联网大数据建设方案
 2023年13个最适合销售电子书的WordPress主题
 Optional详解和常用API
原文地址：https://blog.csdn.net/weixin_43411214/article/details/137829743