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

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
使用CSS实现音波加载效果
内容摘要: !DOCTYPEhtmlhtmllang='zh-CN'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/t......
<!DOCTYPEhtml>

<htmllang="zh-CN">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

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

<title>Document</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background-color:rgb(4,6,17);

}

.container{

position:relative;

width:20px;

height:20px;

transform-style:preserve-3d;

transform:perspective(500px)rotateX(50deg)translateZ(50px);

}

.containerspan{

position:absolute;

top:calc(-9px*var(--i));

left:calc(-9px*var(--i));

bottom:calc(-9px*var(--i));

right:calc(-9px*var(--i));

border:5pxsolidrgba(0,162,255,0.8);

box-shadow:06px0rgb(0,162,255),

inset06px0rgba(0,162,255,.9);

/*background-color:rgba(0,162,255,0);*/

border-radius:50%;

animation:move1.5sease-in-outinfinitealternate;

animation-delay:calc(var(--i)*0.1s);

}

@keyframesmove{

0%,100%{

transform:translateZ(0px);

}

50%{

transform:translateZ(-100px);

}

}

</style>

</head>

<body>

<divclass="container">

<spanstyle="--i:1;"></span>

<spanstyle="--i:2;"></span>

<spanstyle="--i:3;"></span>

<spanstyle="--i:4;"></span>

<spanstyle="--i:5;"></span>

<spanstyle="--i:6;"></span>

<spanstyle="--i:7;"></span>

<spanstyle="--i:8;"></span>

<spanstyle="--i:9;"></span>

<spanstyle="--i:10;"></span>

</div>

</body>

</html>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JS实现简单表格排序操作示例

 

下一篇:使用css实现水波加载动画效果

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