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;}
