文章详情
html+css显示过渡加载圈圈动画
Posted on 2021-08-01 12:35:44 by 主打一个C++
html加载过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画加载效果，转圈圈</title>
<!-- 样式 -->
<style>
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgb(14, 9, 2);
z-index: 999999;
display: flex;
justify-content: center;
align-items: center;
}
.loading-spinner {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!-- 显示动画 -->
<div class="loading-overlay">
<div class="loading-spinner">
</div>
</div>
</body>
</html>//一张慢慢的gif看看🤡
*转载请注明出处：原文链接：https://cpp.vin/page/5.html
