svg实现简单沙漏
先画一个简单的沙漏
例如：
svg代码：
.timerWrap {
position: relative;
animation: timerRotate 1s infinite ease;
120px;
height: 160px;
margin: auto;
top: 40px;
}
@keyframes timerRotate {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-180deg);
}
}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
background: #1a1a1a;
}
.timerWrap {
position: relative;
animation: timerRotate 1s infinite ease;
120px;
height: 160px;
margin: auto;
top: 40px;
}
@keyframes timerRotate {
0% {
transform: rotateZ(0deg);
}
50% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-180deg);
}
}
</style>
</head>
<body>
<div class="timerWrap">
<svg version="1.1" viewBox="131.623 175.5 120 160" preserveAspectRatio="xMinYMin meet" class="timer">
<path fill="#3f6b9d" 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>
</body>
</html>
效果图：
