CSS3实现加载的动画效果---菊花

小猿L

于 2021-10-20 15:43:57 发布

阅读量236

点赞数

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/enhenglhm/article/details/120867681

版权

实现效果如图：

话不多说上代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title>CSS3实现加载的动画效果---菊花</title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's css lib" />
<meta name="description" content="CSS3" />
<style>
*{margin:0;padding:0;}
	
.gdp_loadingBox,.gdp_loading,.gdp_loading_line,.gdp_loading_text{
	display:inline-block;
}
.gdp_loadingBox{
	background-color: #fff;
    margin-left:45%;
	margin-top:20px;
	border:2px solid #eee;
}
.gdp_loading_text{
	margin:auto;
	height: 36px;
	margin: 10px 5px;
	line-height:36px;
}
.gdp_loading{width:35px;height:36px;margin:10px 10px;}
.gdp_loading{background:#fff;}
/** 加载动画的静态样式 **/
.gdp_loading{position:relative;}
.gdp_loading .gdp_loading_line div{position:absolute;left:16px;top:0;width:3px;height:35px;}
.gdp_loading .gdp_loading_line div:before,.gdp_loading .gdp_loading_line div:after{content:'';display:block;height:50%;background:#1989fa;border-radius:5px;}
.gdp_loading .gdp_loading_line div:nth-child(2){-webkit-transform:rotate(45deg);}
.gdp_loading .gdp_loading_line div:nth-child(3){-webkit-transform:rotate(90deg);}
.gdp_loading .gdp_loading_line div:nth-child(4){-webkit-transform:rotate(135deg);}
.gdp_loading .gdp_line_circlebg{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;background:#fff;border-radius:18px;}
/** 加载动画 **/
@-webkit-keyframes load{
    0%{opacity:0;}
    100%{opacity:1;}
}
.gdp_loading .gdp_loading_line div:nth-child(1):before{-webkit-animation:load 1.2s linear 0s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(2):before{-webkit-animation:load 1.2s linear 0.1s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(3):before{-webkit-animation:load 1.2s linear 0.2s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(4):before{-webkit-animation:load 1.2s linear 0.3s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(1):after{-webkit-animation:load 1.2s linear 0.4s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(2):after{-webkit-animation:load 1.2s linear 0.5s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(3):after{-webkit-animation:load 1.2s linear 0.6s infinite;}
.gdp_loading .gdp_loading_line div:nth-child(4):after{-webkit-animation:load 1.2s linear 0.7s infinite;}

</style>
</head>

<body>
<div class='gdp_loadingBox'>
	<div class='gdp_loading'>
	    <div class='gdp_loading_line'>
	        <div></div>
	        <div></div>
	        <div></div>
	        <div></div>
	    </div>
	    <div class='gdp_line_circlebg'></div>
	</div>
	<div class='gdp_loading_text'>数据加载中…</div>
</div>

</body>
</html>

小猿L

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现加载的动画效果---菊花

实现效果如图：话不多说上代码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"><title>CSS3实现加载的动画效果---菊花</title><meta name="author" content="rainna" /><meta name="keyw.
复制链接

扫一扫