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