CSS3 加载中对话框

女爷i 2024-04-18 08:16 15阅读 0赞

![在这里插入图片描述][20190903204312860.gif]\`\`\`

\}  
/\*\* 做一个圆心，辅助观察计算数值是否正确 */  
.loaderCenter \{  
background-color:white;  
width:.3rem;  
height:.3rem;  
border-radius:.2rem;  
/*\* 控制圆心的显示与否 */  
display: none;  
\}  
.blob \{  
position: absolute;  
/*\* top/left决定了小圆点的位置，也决定了旋转中心 */  
left: var(–centerPos);  
top: var(–centerPos);  
width: var(–blobDiameter);  
height: var(–blobDiameter);  
/*\* 将圆角的数值设为半径，可以让正方形变成圆形 */  
border-radius: calc(var(–blobDiameter) / 2);  
background-color: white;  
/*\*  
模糊的值必须大于直径的1/4是因为对比度设为30%，低于这个值，会被近似为黑色，所以显示不出来  
*/  
filter: blur(calc(var(–blobDiameter) / 4));  
/*\*  
设置初始位置，让所有小圆集中在上面，由于颜色叠加的缘故，  
会使因模糊(blur)减淡的颜色重新变为之前的颜色  
*/  
transform: translateY(var(–blobY));  
animation: spin 2.5s infinite ease-in-out;  
\}  
/*\*  
绕着圆心旋转，由于transform是相对自身的坐标轴，旋转导致坐标轴跟着旋转，  
所以这里在translateY，就变成绕着圆周做动画了  
\*/  
@keyframes spin \{  
0% \{  
transform: rotate(0deg) translateY(var(–blobY));  
\}  
70% \{  
transform: rotate(360deg) translateY(var(–blobY));  
\}  
\}

\`\`\`

[20190903204312860.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c84a6c3d32944da992ddcd6d752d38c8.gif

发表评论取消回复

表情：

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

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

相关阅读

相关 CSS3 加载中对话框

[在这里插入图片描述][20190903204312860.gif]\`\`\` \} /\*\* 做一个圆心，辅助观察计算数值是否正确 */ .loaderC...

女爷i/ 2024年04月18日 08:16/ 0 赞/ 16 阅读

相关纯CSS3彩虹加载loading代码

[下载地址][Link 1]纯CSS3彩虹加载loading代码特效，一款使用CSS3绘制的彩虹弹簧式加载效果代码。 ![1631148589.png][] dd: [

墨蓝/ 2022年09月10日 14:23/ 0 赞/ 172 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 185 阅读

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

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

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

相关 css3 animation爱心加载loadingjs特效

[下载地址][Link 1] CSS3爱心形状加载动画特效，基于css3 animation属性制作的彩色的粗线条爱心形状加载动画特效。 ![ae720c4ff7aef5e

傷城~/ 2022年08月28日 08:57/ 0 赞/ 135 阅读

相关 JavaScript、jQuery、css3实现瀑布流加载

实现的最终效果如下： ![Center][] 在实现的过程中用到的有： 1.css设置边框为圆角： border-radius: 5px;

落日映苍穹つ/ 2022年08月20日 14:24/ 0 赞/ 196 阅读

相关 Android加载中对话框示例

Android加载中对话框示例前一段时间需要一个Android加载中的对话框，纠结了比较久。加载中对话框就是要显示的页面其中的数据量未定，所以显示是循环获取的状态

亦凉/ 2022年05月29日 07:36/ 0 赞/ 188 阅读

相关动态加载css

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

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

相关 8种css3实现的Loading加载中样式

（微信小程序可用） ![在这里插入图片描述][20190415090756641.png] 直接上代码 html部分 <view id="ajaxload

亦凉/ 2022年02月18日 21:15/ 0 赞/ 972 阅读

相关 CSS3实现的图片加载动画效果

日期：2013-7-16 来源：[GBin1.com][] ![CSS3实现的图片加载动画效果][CSS3] [在线演示 ][Link 1] 使用C

清疚/ 2022年01月06日 07:11/ 0 赞/ 277 阅读