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

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
html+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(7,15,26);

}

.container{

position:relative;

height:150px;

width:250px;

-webkit-box-reflect:below1pxlinear-gradient(transparent,rgb(7,15,26));

}

.container>span{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

color:rgb(20,129,202);

text-shadow:0010pxrgb(20,129,202),

0030pxrgb(20,129,202),

0060pxrgb(20,129,202),

00100pxrgb(20,129,202);

font-size:18px;

z-index:1;

}

.circle{

position:relative;

margin:0auto;

height:150px;

width:150px;

background-color:rgb(13,10,37);

border-radius:50%;

animation:zhuan2slinearinfinite;

}

@keyframeszhuan{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

.circle::after{

content:'';

position:absolute;

top:10px;

left:10px;

right:10px;

bottom:10px;

background-color:rgb(7,15,26);

border-radius:50%;

}

.ring{

position:absolute;

top:0;

left:0;

width:75px;

height:150px;

background-image:linear-gradient(180deg,rgb(22,121,252),transparent80%);

border-radius:75px0075px;

}

.ring::after{

content:'';

position:absolute;

right:-5px;

top:-2.5px;

width:15px;

height:15px;

background-color:rgb(40,124,202);

box-shadow:005pxrgb(40,151,202),

0010pxrgb(40,124,202),

0020pxrgb(40,124,202),

0030pxrgb(40,124,202),

0040pxrgb(40,124,202),

0050pxrgb(40,124,202),

0060pxrgb(40,124,202),

0060pxrgb(40,124,202);

border-radius:50%;

z-index:1;

}

</style>

</head>

<body>

<divclass="container">

<span>Loading...</span>

<divclass="circle">

<divclass="ring"></div>

</div>

</div>

</body>

</html>

版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:vue实现鼠标悬浮框效果

 

下一篇:css实现左上角飘带效果的完整代码

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