CSS3 SVG实现时间沙漏特效下载css代码.

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

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

以下是 CSS3 SVG实现时间沙漏特效下载css代码. 的示例演示效果:

当前平台(PC电脑)

平台:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>CSS3+SVG实现时间沙漏特效下载</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="wrapper">
	<div class="loader">
		<div class="timerWrap">
			<svg version="1.1" viewBox="131.623 175.5 120 160" preserveAspectRatio="xMinYMin meet" class="timer">
			<path fill="#FFFFFF" d="M212.922,255.45l36.855-64.492c1.742-3.069,1.742-6.836-0.037-9.896c-1.783-3.06-5.037-4.938-8.581-4.938
			h-99.158c-3.524,0-6.797,1.878-8.569,4.938c-1.773,3.06-1.792,6.827-0.03,9.896l36.846,64.491l-36.845,64.492
			c-1.762,3.068-1.743,6.836,0.03,9.896c1.772,3.061,5.044,4.938,8.569,4.938h99.158c3.544,0,6.798-1.878,8.581-4.938
			c1.779-3.06,1.779-6.827,0.037-9.896L212.922,255.45z M142.001,324.86l39.664-69.41l-39.664-69.41h99.158l-39.663,69.41
			l39.663,69.41H142.001z"/>
			</svg>
		</div>
	</div>
</div>
</body>
</html>

CSS代码(style.css):

body{background:#1a1a1a;font-family:sans-serif;text-align:center;overflow-y:scroll;color:#fefefe;}
a{text-decoration:none;}
a.link{color:#3f6b9d;-webkit-transition:all 150 ease 0s;transition:all 150 ease 0s;}
a.link:hover{color:#e08f24;}
p{margin-bottom:10px;}
.wrapper{width:110px;max-width:100%;margin:0 auto;}
aside{float:left;width:50%;margin:60px 0 40px;}
aside h1{margin-bottom:0px;}
aside .sup{font-style:italic;color:#999;margin-top:4px;}
@-webkit-keyframes timerRotate{0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(0deg);}
100%{transform:rotateZ(-180deg);}
}
@-moz-keyframes timerRotate{0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(0deg);}
100%{transform:rotateZ(-180deg);}
}
@-ms-keyframes timerRotate{0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(0deg);}
100%{transform:rotateZ(-180deg);}
}
@keyframes timerRotate{0%{transform:rotateZ(0deg);}
50%{transform:rotateZ(0deg);}
100%{transform:rotateZ(-180deg);}
}
@-webkit-keyframes bottomFill{0%{border-bottom-width:0px;}
50%{border-bottom-width:60px;}
100%{border-bottom-width:60px;}
}
@-moz-keyframes bottomFill{0%{border-bottom-width:0px;}
50%{border-bottom-width:60px;}
100%{border-bottom-width:60px;}
}
@-ms-keyframes bottomFill{0%{border-bottom-width:0px;}
50%{border-bottom-width:60px;}
100%{border-bottom-width:60px;}
}
@keyframes bottomFill{0%{border-bottom-width:0px;}
50%{border-bottom-width:60px;}
100%{border-bottom-width:60px;}
}
@-webkit-keyframes topEmpty{0%{top:19px;border-top-width:60px;border-left-width:35px;border-right-width:35px;}
50%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
100%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
}
@-moz-keyframes topEmpty{0%{top:19px;border-top-width:60px;border-left-width:35px;border-right-width:35px;}
50%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
100%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
}
@-ms-keyframes topEmpty{0%{top:19px;border-top-width:60px;border-left-width:35px;border-right-width:35px;}
50%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
100%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
}
@keyframes topEmpty{0%{top:19px;border-top-width:60px;border-left-width:35px;border-right-width:35px;}
50%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
100%{top:80px;border-top-width:0px;border-left-width:0px;border-right-width:0px;}
}
.loader{width:50%;height:200px;float:left;-webkit-transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;}
.loader .timerWrap{position:relative;animation:timerRotate 1s infinite ease;-webkit-animation:timerRotate 1s infinite ease;-moz-animation:timerRotate 1s infinite ease;-ms-animation:timerRotate 1s infinite ease;width:120px;height:160px;margin:auto;top:40px;}
.loader .timerWrap:before{content:"";width:0;height:0;border-style:solid;border-width:60px 35px 0 35px;border-color:#e08f24 transparent transparent transparent;position:absolute;top:19px;left:0;right:0;margin:auto;animation:topEmpty 1s infinite ease;-webkit-animation:topEmpty 1s infinite ease;-moz-animation:topEmpty 1s infinite ease;-ms-animation:topEmpty 1s infinite ease;}
.loader .timerWrap:after{content:"";width:0;height:0;border-style:solid;border-width:0 35px 60px 35px;border-color:transparent transparent #e08f24 transparent;position:absolute;bottom:19px;left:0;right:0;margin:auto;animation:bottomFill 1s infinite ease;-webkit-animation:bottomFill 1s infinite ease;-moz-animation:bottomFill 1s infinite ease;-ms-animation:bottomFill 1s infinite ease;}
.loader .timerWrap .timer{width:120px;max-width:100%;height:160px;position:relative;top:0;left:0;}
.loader .timerWrap .timer path{fill:#3f6b9d;}

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