网站打开时添加圆形加载动画-知新网

浏览网页时，难免会有网页加载慢的情况，当网页长时间未加载完毕时，可以显示一些动画效果，以避免网页长时间空白。本实例实现的是圆形加载动画，当页面加载完成时，页面中的弧形会一直在页面中转动，具体运行效果如下图所示：

本实例主要结合使用css3中的边框属性和动画属性实现圆形加载动画。为<div>标签添加边框，可通过border属性可实现。其使用语法如下：

border: border-color border-style border-width
//border-color：设置边框颜色。
//border-style：设置边框样式。
//border-width：设置边框宽度。
需要说明的是，上面三个属性值可以在一行里设置，也可单独设置，例如，单独设置边框颜色的语法为
border-color：color
当然若以上三个属性在一行里设置时，表示设置标签的四条边框的样式相同，
同样，我们可以单独设置某一条边框的样式，例如，单独设置上边框的样式，其语法为：
Border-top: border-color border-style border-width

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圆形加载动画</title>
	<style>
		.box {
		    text-align: center;
		    width: 300px;
		    height: 200px;
		    margin: 20px auto;
		}
		.box>span {
		    animation: loader 1000ms infinite linear;
		    border-radius: 100%;
		    border: 6px solid #2dbb55;
		    border-left-color: transparent;
		    color: transparent;
		    display: inline-block;
		    line-height: 1.2;
		    width: 50px;
		    height: 50px;
		}
		@keyframes loader {
		    0% {  transform: rotate(0deg);  }
		    100% {transform: rotate(360deg);}
		}
	</style>
</head>
<body>
	<div class="box"><span></span></div>
</body>
</html>

温馨提示：本文最后更新于2023-12-19 14:50:26，某些文章具有时效性，若有错误或已失效，请私信客服或联系知新社长。

文章版权归作者所有，未经允许请勿转载。

三月 28