CSS3绿色Loading加载动画特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3绿色Loading加载动画特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CSS3绿色Loading加载动画特效</title>
    <style type="text/css">
    	.main{
    		width: 100%;
    		height: auto;
    		padding-top: 100px;
    	}
    	a{
    		display: block;
    		text-align: center;
    		font-size: 20px;
    		margin-top: 200px;
    	}
    	.loading{
            width: 80px;
            height: 40px;
            margin: 0 auto;
            margin-top:100px;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
			animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: lightgreen;
            }
            50%{
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
			animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
			animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
			animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
			animation-delay:0.8s;
        }
    </style>
</head>
<body>

<style>
/* Demo Buttons Style */
.codrops-demos {
	font-size: 0.8em;
	text-align:center;
	position:absolute;
	z-index:99;
	width:96%;
}

.codrops-demos a {
	display: inline-block;
	margin: 0.35em 0.1em;
	padding: 0.5em 1.2em;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2px;
	font-size: 110%;
	border: 2px solid transparent;
	color:#3366cc;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
	border-color: #3366cc;
}
</style>

<nav class="codrops-demos">
	<a class="current-demo" href="index.html">Demo 1</a>
	<a href="loading2.html">Demo 2</a>
	<a href="loading3.html">Demo 3</a>
	<a href="loading4.html">Demo 4</a>
	<a href="loading5.html">Demo 5</a>
	<a href="loading6.html">Demo 6</a>
	<a href="loading7.html">Demo 7</a>
	<a href="loading8.html">Demo 8</a>
	<a href="loading9.html">Demo 9</a>
	<a href="loading11.html">Demo 11</a>
	<a href="loading12.html">Demo 12</a>
	<a href="loading13.html">Demo 13</a>
	<a href="loading14.html">Demo 14</a>
</nav>

<div class="main">
	<div class="loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</div>
</body>
</html>

HTML代码(loading2.html):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>CSS3 Loading 效果</title>
    <style type="text/css">
    	.main{
			width: 100%;
			height: auto;
			padding-top: 100px;
    	}
    	a{
    		display: block;
    		text-align: center;
    		font-size: 20px;
    		margin-top: 200px;
    	}
    	.loading{
            width: 150px;
            height: 4px;
            border-radius: 2px;
            margin: 0 auto;
            margin-top:100px;
            position: relative;
            background: lightgreen;
            -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
			animation: changeBgColor 1.04s ease-in infinite alternate;
        }
        .loading span{
            display: inline-block;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: lightgreen;
            position: absolute;
            margin-top: -7px;
            margin-left:-8px;
            -webkit-animation: changePosition 1.04s ease-in infinite alternate;
			animation: changePosition 1.04s ease-in infinite alternate;
        }
        @-webkit-keyframes changeBgColor{
            0%{
                background: lightgreen;
            }
            100%{
                background: lightblue;
            }
        }
        @-webkit-keyframes changePosition{
            0%{
                background: lightgreen;
            }
            100%{
                margin-left: 142px;
                background: lightblue;
            }
        }
    </style>
</head>
<body>

<style>
/* Demo Buttons Style */
.codrops-demos {
	font-size: 0.8em;
	text-align:center;
	position:absolute;
	z-index:99;
	width:96%;
}

.codrops-demos a {
	display: inline-block;
	margin: 0.35em 0.1em;
	padding: 0.5em 1.2em;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2px;
	font-size: 110%;
	border: 2px solid transparent;
	color:#3366cc;
}

.codrops-demos a:hover,
.codrops-demos a.current-demo {
	border-color: #3366cc;
}
</style>

<nav class="codrops-demos">
	<a href="index.html">Demo 1</a>
	<a class="current-demo" href="loading2.html">Demo 2</a>
	<a href="loading3.html">Demo 3</a>
	<a href="loading4.html">Demo 4</a>
	<a href="loading5.html">Demo 5</a>
	<a href="loading6.html">Demo 6</a>
	<a href="loading7.html">Demo 7</a>
	<a href="loading8.html">Demo 8</a>
	<a href="loading9.html">Demo 9</a>
	<a href="loading11.html">Demo 11</a>
	<a href="loading12.html">Demo 12</a>
	<a href="loading13.html">Demo 13</a>
	<a href="loading14.html">Demo 14</a>
</nav>

	<div class="main">
		<div class="loading">
		    <span></span>
		</div>
	</div>

</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)