渐变闪亮预加载HTML动画源码

篡命师 · 发表于 2022-11-14 12:00:00

您需要登录才可以下载或查看，没有账号？立即注册

×

预加载器是您在页面的其余内容仍在加载时在屏幕上检查的内容。预加载器或加载器通常是简单或复杂的动画，用于在服务器操作完成处理时让访问者保持娱乐。

HTML

复制代码

style.css：

html,body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: sans-serif;
background: #240f52;
overflow: hidden;
}
.outer{
height: 300px;
width: 300px;
background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
border-radius: 50%;
}
.inner{
position: absolute;
width: 275px;
height: 275px;
text-align: center;
line-height: 275px;
background: #240f52;
border-radius: 50%;
cursor: default;
/* opacity: 0; */
}
.inner span{
font-size: 60px;
font-weight: 800;
background: linear-gradient(135deg,#FEED07 0%,#FE6A50 5%,#ED00AA 15%,#2FE3FE 50%,#8900FF 100%);
color: transparent;
-webkit-background-clip: text;
background-size: 300%;
}
.outer.active-loader{
animation: rotate 2s ease infinite;
}
@keyframes rotate {
to{
transform: rotate(360deg);
}
}
.outer.active-loader-2{
animation: rotate2 3s ease;
}
@keyframes rotate2 {
to{
transform: rotate(360deg);
}
}

复制代码

[网站源码] 渐变闪亮预加载HTML动画源码