用css写loading

偏执的太偏执、 2023-01-01 15:52 91阅读 0赞

用css写loading  
我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。  
`<div class="loading-css"></div>`

.loading-css {
        width: 50px; /*先将loading区域变成正方形*/
        height: 50px;
        display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/
        border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/
        border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/
        border-radius: 50%; /*将边框和内容区域都变成圆形*/
    }

此时效果如下:  
![在这里插入图片描述][20210103195328893.png]

圆环效果已经出来了，接下来让圆环旋转起来即可，如:

@keyframes loading-360 {
        0% {
            transform: rotate(0deg); /*动画起始的时候旋转了0度*/
        }
        100% {
            transform: rotate(360deg); /*动画结束的时候旋转了360度*/
        }
    }
    .loading-css { /*在之前的CSS中加上动画效果即可*/
        animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/
    }

![在这里插入图片描述][20210103195527917.gif]

[20210103195328893.png]: /images/20221120/968411b4dc034b469f26655bca5333a1.png
[20210103195527917.gif]: /images/20221120/db32feb6184f48aabe5a1b41da837989.png

发表评论取消回复

表情：

评论列表（有 0 条评论，91人围观）

还没有评论，来说两句吧...

相关阅读

相关用css写三角形

转自 [ http://bbs.blueidea.com/thread-2818535-1-1.html][http_bbs.blueidea.com_thread-28185

傷城~/ 2023年08月17日 16:20/ 0 赞/ 99 阅读

相关用css写loading

用css写loading 我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，bor

偏执的太偏执、/ 2023年01月01日 15:52/ 0 赞/ 92 阅读

相关用css写进度条

用css写进度条我们平时写进度条一般是一个父div包裹一个子div，用js控制子div的宽度实现进度条，我们现在可以用css简单实现进度条了。代码如下：在

怼烎@/ 2022年12月29日 04:56/ 0 赞/ 106 阅读

相关如何用css写布局

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_

迷南。/ 2022年08月28日 13:53/ 0 赞/ 149 阅读

相关用css写个三角形

在百度前端学院任务重遇到了这个，之前也接触过，在这里写一下吧。 ![这里写图片描述][SouthEast] 就是上面这个三角形。我是这样写的 div{

痛定思痛。/ 2022年06月18日 08:46/ 0 赞/ 199 阅读

相关 CSS 绘制loading图标

原理：利用animate动画和时间差绘制小原点。 <!doctype html> <html lang="en"> <head> <m

快来打我*/ 2022年05月31日 13:15/ 0 赞/ 223 阅读

相关 css3-loading动画

1.源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

ゞ浴缸里的玫瑰/ 2022年05月19日 11:08/ 0 赞/ 237 阅读

相关【CSS】使用css实现一个loading效果

<style> body { padding: 200px; position: relative;

我就是我/ 2022年03月10日 04:36/ 0 赞/ 295 阅读

相关用CSS写一个开关Switch

效果如下： ![2019080320023518.png][] 代码如下： HTML: <input class='switch-component' type

偏执的太偏执、/ 2021年11月10日 23:01/ 0 赞/ 349 阅读

相关 CSS3实现1前端常用Loading效果

此页动画效果都是gif图的，不想用代码写的话，下载图片就可使用。第1种效果： ![1086124-20170308160012500-1342891376.gif][]

小咪咪/ 2021年10月24日 04:36/ 0 赞/ 345 阅读