纯CSS3动画实现加载样式

最新推荐文章于 2024-08-28 21:26:11 发布

Mr.王征

最新推荐文章于 2024-08-28 21:26:11 发布

阅读量366

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTML5 CSS 文章标签：动画 css css3

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/87893904

CSS 同时被 2 个专栏收录

32 篇文章

订阅专栏

HTML5

23 篇文章

订阅专栏

本文展示了一个使用纯CSS3技术实现的加载动画效果。通过关键帧动画和过渡效果，创建了一个旋转的加载图标，同时配合遮罩层，实现了页面加载时的视觉效果。代码简洁，易于理解和复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

代码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS3动画实现加载样式</title>
<style>
.loader {
   position:fixed;
   left:50%;
   top:50%;
   margin:-0.2em 0 0 -0.2em;
   text-indent:-9999em;
   border-top:0.3em solid rgba(0,0,0,0.1);
   border-right:0.3em solid rgba(0,0,0,0.1);
   border-bottom:0.3em solid rgba(0,0,0,0.1);
   border-left:0.3em solid #555;
   -moz-transform:translateZ(0);
   -webkit-transform:translateZ(0);
   transform:translateZ(0);
   -moz-animation:loader 300ms infinite linear;
   -webkit-animation:loader 300ms infinite linear;
   animation:loader 300ms infinite linear;
   -moz-transition:all 500ms ease;
   -o-transition:all 500ms ease;
   -webkit-transition:all 500ms ease;
   transition:all 500ms ease;
}
.loader,.loader:after {
   border-radius:50%;
   width:2em;
   height:2em;
}
.curtain {
   position:fixed;
   width:100%;
   height:100%;
   top:0;
   left:0;
   background-color:white;
   -moz-transition:all 600ms ease;
   -o-transition:all 600ms ease;
   -webkit-transition:all 600ms ease;
   transition:all 600ms ease;
   filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
   opacity:0;
   z-index:0;
   overflow:hidden;
}
@-webkit-keyframes loader {
   0% {
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
}
100% {
   -webkit-transform:rotate(360deg);
   transform:rotate(360deg);
}
}@-moz-keyframes loader {
   0% {
   -moz-transform:rotate(0deg);
   transform:rotate(0deg);
}
100% {
   -moz-transform:rotate(360deg);
   transform:rotate(360deg);
}
}@keyframes loader {
   0% {
   -webkit-transform:rotate(0deg);
   transform:rotate(0deg);
}
100% {
   -webkit-transform:rotate(360deg);
   transform:rotate(360deg);
}
}.is-loading {
   overflow:hidden;
}
.is-loading .curtain {
   filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
   opacity:1;
   z-index:99;
}
.is-loading .loader {
   filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
   opacity:1;
}
</style>
</head>
<body>
<div class="is-loading">
<div class="curtain">
<div class="loader">
</div>
</div>
</div>