CSS实现加载动画
需求:在开发过程中,我们会经常遇到一些基本的加载动画需求。这里我们简单介绍几个加载动画,主要是通过使用。
·
需求:在开发过程中,我们会经常遇到一些基本的加载动画需求。这里我们简单介绍几个加载动画,主要是通过使用css的animation和transition的属性进行实现的动画和过渡效果。
语法:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
1- 示例一如下
进度条转圈圈的加载动画
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading2</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100vh;
}
.rotate-loading {
width: 40px;
height: 40px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 6px solid rgba(200, 200, 200, 0.5);
border-top: 6px solid black;
animation: rotate-loading 1s linear infinite;
}
@keyframes rotate-loading {
0% {
transform: rotate(0deg);
}
100% {
/* 顺时针旋转360度 */
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="rotate-loading"></div>
</body>
</html>
2- 示例二如下
loading跳动的加载动画
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading3</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
height: 100vh;
}
.wave-loading {
width: 400px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.wave-loading span {
display: inline-block;
font-size: 30px;
font-weight: bold;
font-family: 'Courier New', Courier, monospace;
animation: wave-loading 1s ease-in-out infinite;
animation-delay: calc(0.1s * var(--time));
}
@keyframes wave-loading {
0% {
transform: translateY(0px);
}
25% {
transform: translateY(-20px);
}
50%,100% {
transform: translateY(0px);
}
}
</style>
</head>
<body>
<div class="wave-loading">
<span style="--time:1">l</span>
<span style="--time:2">o</span>
<span style="--time:3">a</span>
<span style="--time:4">d</span>
<span style="--time:5">i</span>
<span style="--time:6">n</span>
<span style="--time:7">g</span>
<span style="--time:8">.</span>
<span style="--time:9">.</span>
<span style="--time:10">.</span>
</div>
</body>
</html>
3- 示例三如下
3个圆点加载动画
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading3</title>
<style type="text/css">
.loadding-box {
display: flex;
.dot1,
.dot2,
.dot3 {
width: 8px;
height: 8px;
border-radius: 50%;
margin-left: 6px;
}
.dot1 {
animation: jump 1.2s -0.4s linear infinite;
background: #8c8ef7;
}
.dot2 {
animation: jump 1.2s -0.2s linear infinite;
background: #5e85d1;
}
.dot3 {
animation: jump 1.2s linear infinite;
background: #2e6de7;
}
@keyframes jump {
0%,
80%,
100% {
transform: scale(0.9);
opacity: 1.0;
}
40% {
transform: scale(1.1);
opacity: 0.8;
}
}
}
</style>
</head>
<body>
<div class="loadding-box">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
</body>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)