HTML+CSS制作旋转的loading效果

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

HTML+CSS制作旋转的loading效果相关推荐

HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
记录html+css制作一个上下跳动效果的动画
需求想用html+css制作一个上下跳动效果的动画,然后记录一下代码,方便今后使用. 实例代码 <!DOCTYPE html > <html><head>< ...
html怎么设置左上角标注,利用HTML+CSS制作左上角卷角效果的网页的方法
利用HTML+CSS制作左上角卷角效果的网页的方法 2020-02-13 19:02:00 195 英文原文 http://designshack.net/articles/css/code-a-si ...
html绘制叶子形状,css实现叶子形状loading效果的方法
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: body{ background: #000;} .color1{ backg ...
html绘制叶子形状,css实现叶子形状loading效果
本文实例讲述了css实现叶子形状loading效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码代码如下: body{ background: #000;} .color1{ backgr ...
html翻牌动画效果,css实现旋转翻牌动画效果
css动画之旋转翻牌效果,具体内容如下所示: 1.我们先设置两个盒子大小,颜色等等,然后定位重叠在一起,最后再进行动画设置例子如下: .box { height: 300px; width: 300 ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
css实现简单的loading效果
当你的网站没有完全加载的时候,最好的办法就是播放一些动画.它让用户知道页面正在加载中,我们可以使用 css 实现各种 loading 效果,比如图片中显示的4种风格. 示例1 html代码 <d ...
html+css制作3D透明立体效果
今天给大家分享一下如何制作3D透明立体首先还是说一下原理: 在一个大盒子中包含六个小盒子,每个盒子中放置一张图片,通过我们使用rotate和translate属性,让每一张图片旋转一定的角度,从而使 ...

HTML+CSS制作旋转的loading效果

HTML+CSS制作旋转的loading效果相关推荐

最新文章

热门文章