您正在使用 IPV4 [44.221.73.157] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 七夕节 056
2025年 高 考 357
2025年 元 旦 200
2025年 春 节 228
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS实现渐变式圆点加载动画
内容摘要: html页面!DOCTYPEhtmlhtmllang='zh'headmetacharset='utf-8'linkrel='stylesheet'href='style.css'title渐变加载条/title/headbodydivclass='app'divclass='loading38'spanclass='load-span38'/spanspa......
html页面

<!DOCTYPEhtml>

<htmllang="zh">

<head>

<metacharset="utf-8">

<linkrel="stylesheet"href="style.css">

<title>渐变加载条</title>

</head>

<body>

<divclass="app">

<divclass="loading38">

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

<spanclass="load-span38"></span>

</div>

</div>

</body>

</html>

css样式

/**style.css**/

.app{

width:100%;

height:100vh;

background-color:#ffffff;

position:relative;

display:flex;

justify-content:center;

align-items:center;

}

.loading38{

--r-num:45deg;/*定义角度值*/

width:40px;

height:40px;

position:relative;

animation:loading38-eff1ssteps(8)bothinfinite;

}

.load-span38{

width:6px;

height:6px;

display:block;

border-radius:3px;

position:absolute;

left:17px;

top:0;

transform-origin:3px20px;

}

.load-span38:nth-of-type(1){

transform:rotate(var(--r-num));

background:#2FACFD;

}

.load-span38:nth-of-type(2){

transform:rotate(calc(var(--r-num)*2));

background:#33B4FD;

}

.load-span38:nth-of-type(3){

transform:rotate(calc(var(--r-num)*3));

background:#38BEFE;

}

.load-span38:nth-of-type(4){

transform:rotate(calc(var(--r-num)*4));

background:#3ECAFE;

}

.load-span38:nth-of-type(5){

transform:rotate(calc(var(--r-num)*5));

background:#45D7FE;

}

.load-span38:nth-of-type(6){

transform:rotate(calc(var(--r-num)*6));

background:#4BE4FE;

}

.load-span38:nth-of-type(7){

transform:rotate(calc(var(--r-num)*7));

background:#52F1FF;

}

.load-span38:nth-of-type(8){

transform:rotate(calc(var(--r-num)*8));

background:#57FBFF;

}

@keyframesloading38-eff{

to{

transform:rotate(0deg);

}

from{

transform:rotate(-360deg);

}

}

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:CSS中隐藏元素的常见5种方法

 

下一篇:JS限制input框只能输入0~100的正整数的两种方法

发布日期:2024/3/27
手机扫二维码直达本页
发布时间:20:13:45
点  击:14
录  入:齐天大圣
相关文章
Baidu
YiJiaCMS 7.5.1 build240527(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....