CSS绘制加载项

末蓝、 2022-05-08 05:24 231阅读 0赞

#### HTML主体结构 ####

<body> <div class="spinner"> <i></i> </div> </body>

#### CSS样式 ####

.spinner{ margin: 100px auto; border-radius: 50%; font-size: 50px; width: 1em; height: 1em; border-radius: 50%; box-shadow: inset 0 0 0 .1em rgba(58, 168, 237, .2); } .spinner i{ position: absolute; clip:rect(0,1em,1em,.5em); width: 1em; height: 1em; animation: spinner-circle-clipper 1s ease-in-out infinite; } .spinner i:after{ position: absolute; clip: rect(0, 1em, 1em, .5em); width: 1em; height: 1em; content: ''; animation: spinner-circle 1s ease-in-out infinite; border-radius: 50%; box-shadow: inset 0 0 0 .1em #3aa8ed; } @keyframes spinner-circle-clipper{ 0% { transform: rotate(0deg); } 100%{ transform: rotate(180deg); } } @keyframes spinner-circle{ 0% { transform: rotate(-180deg); } 100%{ transform: rotate(180deg); } }

### 效果图 ###

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

[70]: https://img-blog.csdn.net/20181009131758521?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NDQwODAz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220508/620514ff0e7f416183a56b3357088fca.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Office 加载项怎么开发

要开发 Office 加载项，首先需要满足一些系统需求，包括：安装 Office 开发人员工具，可以在 Office 安装包中找到，也可以从 Microsoft 官网

爱被打了一巴掌/ 2024年03月27日 12:26/ 0 赞/ 104 阅读

相关 VB创建COM加载项

如何用VB创建COM加载项？通过此演练，可以用 VB 创建 COM 加载项。COM 加载项可以在不给用户增加复杂性的情况下扩展应用程序的功能。究其实质，COM 加载项是一个

拼搏现实的明天。/ 2024年03月22日 21:33/ 0 赞/ 81 阅读

相关 require 按需加载css,如何使用requirejs加载css？

这是我的requirejs配置文件。我在基于角度的项目上使用require js。如果我可以用requirejs加载css，我也可以组织我的css文件！我是requirejs概

﹏ヽ暗。殇╰゛Y/ 2022年09月02日 14:56/ 0 赞/ 142 阅读

相关 CSS3绘制8种超炫的加载动画

CSS3绘制8种超炫的加载动画逛前端开发网站的时候，偶尔发现一组非常炫酷的CSS3加载动画，遂迫不及待的做个Demo保存下来。这些加载动画用到了CSS3的旋转tran

朱雀/ 2022年08月21日 06:36/ 0 赞/ 346 阅读

相关 Word、PowerPoint无法加载mathtype加载项

一般我们在卸载mathtype之后，都会出现“Word无法加载mathtype加载项”或者“PowerPoint无法加载mathtype加载项”的问题，这是因为我们卸载math

向右看齐/ 2022年06月01日 12:18/ 1 赞/ 1999 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 331 阅读

相关动态加载css

在<script>中动态加载CSS // 动态加载css var loadStyle = function(url) { var

ゝ一纸荒年。/ 2022年05月26日 04:14/ 0 赞/ 205 阅读

相关 js修改css加载

js在修改页面css样式时，放在 < body> </ body>之前，得以修改。 <html> <head> <style type="tex

布满荆棘的人生/ 2022年05月13日 16:19/ 0 赞/ 225 阅读

相关 CSS绘制加载项

HTML主体结构 <body> <div class="spinner"> <i></i> </div> </body> CSS样式 .spinn

末蓝、/ 2022年05月08日 05:24/ 0 赞/ 232 阅读

相关 office2007加载项_Office 2007安装加载项

![office2007加载项][office2007] office2007加载项 You can install Add-In software to most Off

朴灿烈づ我的快乐病毒、/ 2021年07月27日 02:51/ 0 赞/ 586 阅读