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

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用css实现水波加载动画效果
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titlestyle*{padding:0;margin:0;box-sizing:border-box;......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<style>

*{

padding:0;

margin:0;

box-sizing:border-box;

}

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background-color:rgb(240,228,228);

}

.quan{

position:relative;

width:180px;

height:180px;

border-radius:50%;

border:3pxsolidrgb(246,247,248);

box-shadow:0003pxrgb(41,134,196);

}

.shui{

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background-color:rgb(23,106,201);

border-radius:50%;

overflow:hidden;

}

.shui::after{

content:'';

position:absolute;

top:0;

left:50%;

width:150%;

height:150%;

border-radius:40%;

background-color:rgb(240,228,228);

animation:shi5slinearinfinite;

}

@keyframesshi{

0%{

transform:translate(-50%,-65%)rotate(0deg);

}

100%{

transform:translate(-50%,-65%)rotate(360deg);

}

}

.shui::before{

content:'';

position:absolute;

top:0;

left:50%;

width:150%;

height:150%;

border-radius:42%;

background-color:rgb(240,228,228,0.2);

animation:xu7slinearinfinite;

}

@keyframesxu{

0%{

transform:translate(-50%,-60%)rotate(0deg);

}

100%{

transform:translate(-50%,-60%)rotate(360deg);

}

}

</style>

</head>

<body>

<divclass="quan">

<divclass="shui"></div>

</div>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:使用CSS实现音波加载效果

 

下一篇:js实现响应按钮点击弹出可拖拽的非模态对话框完整实例

发布日期:2023/4/26
手机扫二维码直达本页
发布时间:13:59:09
点  击:8
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....