63.(原65)纯 CSS 创作一个摇摇晃晃的 loader

时间:2021-09-03 07:47:59

原文地址:https://segmentfault.com/a/1190000015424389

修改后地址:https://scrimba.com/c/cqKv4VCR

HTML code:

<div class="loader">
<span>Loading...</span>
</div>

CSS code:

html, body {
margin:;
padding:;
}
/* 设置body的子元素水平垂直居中 */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
overflow: hidden;
}
/* 设置容器尺寸 */
.loader {
position: relative;
/* 在此调节font-size可以调节整个loader的大小,前提是不能在后代元素里设置font-size了 */
font-size: 30px;
width: 10em;
height: 10em;
border: 1px solid white;
/* 画出组成圆的顶部弧线 */
border-top: 0.3em solid hotpink;
border-radius: 50%;
/* width、height包括边框、内边距、内容区 */
box-sizing: border-box;
animation: rotating 2s ease-in-out infinite;
--direction:;
}
/* 用伪元素画出组成圆的另外 2 条弧线 */
.loader::before,
.loader::after {
content: '';
position: absolute;
width: inherit;
height: inherit;
border-radius: 50%;
box-sizing: border-box;
top: -0.2em;
}
.loader::before {
border-top: 0.3em solid dodgerblue;
transform: rotate(120deg);
}
.loader::after {
border-top: 0.3em solid gold;
transform: rotate(240deg);
}
/* 设置文字样式 */
.loader span {
position: absolute;
color: white;
width: inherit;
height: inherit;
text-align: center;
line-height: 10em;
font-family: sans-serif;
animation: rotating 2s linear infinite;
--direction: -1;
}
@keyframes rotating {
50% {
transform: rotate(calc(180deg * var(--direction)));
} 100% {
transform: rotate(calc(360deg * var(--direction)));
}
}