63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader

效果地址: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

63.1拓展之纯 CSS 创作一个摇摇晃晃的 loader的相关文章

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

原文地址:https://segmentfault.com/a/1190000015424389 修改后地址:https://scrimba.com/c/cqKv4VCR HTML code: <div class="loader"> <span>Loading...</span> </div> CSS code: html, body { margin: 0; padding: 0; } /* 设置body的子元素水平垂直居中 */ b

如何用纯 CSS 创作一个充电 loader 特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/deNqdV 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cvrwJAK 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

前端每日实战:146# 视频演示如何用纯 CSS 创作一个脉动 loader

效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/wYvGwr 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cnMgQTr 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/f

如何用纯 CSS 创作一个均衡器 loader 动画

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oybWBy 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cG64puy 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.co

前端每日实战:2.纯 CSS 创作一个矩形旋转 loader 特效

原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HTML代码: <div class="loader"> <span></span> <span></span> <span></span> </div> CSS代码: /* 居中显示 */ htm

前端每日实战3.纯 CSS 创作一个容器厚条纹边框特效

原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class="content"> <h2>What is Lorem Ipsum?</h2> <p>Mauris volutpat risus quis nisi tempus hendrerit. Nullam nisi urna, suscipit quis risu

如何用纯 CSS 创作一个荧光脉冲 loader 特效

效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/pen/erRzzR 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/c/cwrJys7 源代码下载 本地下载 请从 github 下载. https://github.com/comehope/front-end-dail

如何用纯 CSS 创作一个菜单反色填充特效

效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码. 请用 chrome, safari, edge 打开观看. https://scrimba.com/p/pEgDAM/cE833h6 源代码下载 本地下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com

11.纯 CSS 创作一个荧光脉冲 loader 特效

原文地址:https://segmentfault.com/a/1190000014700727 HTML代码: 1 <html> 2 <head> 3 <link rel="stylesheet" href="index.css"> 4 </head> 5 <body> 6 <div class="circle"></div> 7 </body> 8