效果地址:https://scrimba.com/c/cqKv4VCR
HTML code:
<div class="loader"> <span>Loading...</span> </div>
CSS code:
html, body { margin: 0; padding: 0; } /* 设置body的子元素水平垂直居中 */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; overflow: hidden; } /* 设置容器尺寸 */ .loader { /* width、height包括边框、内边距、内容区 */ box-sizing: border-box; position: relative; /* 在此调节font-size可以调节整个loader的大小,前提是不能在后代元素里设置font-size了 */ font-size: 20px; width: 10em; height: 10em; border-radius: 50%; border-top: 0.3em solid red; border-bottom: 0.3em solid blue; animation: rotating 2s ease-in-out infinite; --direction: 1; } /* 设置文字样式 */ .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))); } }
原文地址:https://www.cnblogs.com/FlyingLiao/p/10661300.html
时间: 2024-11-05 23:22:21