HTML+CSS制作旋转的loading效果
效果图如下：
HTML部分源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML+CSS制作旋转的loading效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="loader">
<span>loading...</span>
</div>
</body>
</html>
CSS部分源代码如下：
:root {
--background-color: #2c3e50;
--border-color: #7591AD;
--text-color: #34495e;
--color1: #EC3E27;
--color2: #fd79a8;
--color3: #0984e3;
--color4: #00b894;
--color5: #fdcb6e;
--color6: #e056fd;
--color7: #F97F51;
--color8: #BDC581;
}
* {
margin: 0;
padding: 0;
}
html {
font-size: 14px;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
background-color: var(--background-color);
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif, Arial, 'Microsoft Yahei';
}
.loader {
position: relative;
width: 100px;
height: 100px;
color: #fff;
/* 圆角形成圆形 */
border-radius: 50%;
/* 实现顶部圆弧 */
border-top: 5px solid var(--color2);
/* 解决loading转动时上下浮动问题
主要原因是旋转的不是一个圆形，上方多了边框
下方也增加边框让形状成为一个对称，转动时就不会浮动了
如果使用box-sizing: border-box;应该也可以解决。
好像不行，回头在研究，原理就是让旋转的元素成为一个对称的形状即可。
*/
border-bottom: 5px solid transparent;
/* background-color: turquoise; */
/* 内容左右、上下居中 */
display: flex;
justify-content: center;
align-items: center;
/* 增加动画 */
animation: animate .5s linear infinite;
}
.loader::after, .loader::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
top: -5px;
border-radius: 50%;
border-bottom: 5px solid transparent;
/* background-color: wheat; */
}
.loader::after {
/* 实现顶部圆弧 */
border-top: 5px solid var(--color3);
/* 旋转3分之一圈 */
transform: rotate(120deg);
}
.loader::before {
/* 实现顶部圆弧 */
border-top: 5px solid var(--color6);
/* 旋转3分之一圈 */
transform: rotate(-120deg);
}
/* 创建动画关键帧，实现旋转 */
@keyframes animate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader span{
/* reverse的作用：还是同一个动画但是动画的方向是反着的 */
animation: animate .5s linear infinite reverse;
}