上下两个三角形拼成沙漏，定时翻转重置
← 返回 加载 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .hgs{height:150px;display:flex;align-items:center;justify-content:center}
.fx .hgs .wrap{animation:kfx-flipd 3s ease-in-out infinite}
.fx .hgs .one{width:60px;height:50px;background:linear-gradient(135deg,#e78a3e,#f7c873);clip-path:polygon(0 0,100% 0,50% 100%)}
.fx .hgs .two{width:60px;height:50px;background:linear-gradient(135deg,#f7c873,#e78a3e);clip-path:polygon(50% 0,0 100%,100% 100%)}
@keyframes kfx-flipd{0%,45%{transform:rotate(0)}55%,100%{transform:rotate(180deg)}}<div class="fx">
<div class="hgs"><div class="wrap"><div class="one"></div><div class="two"></div></div></div>
</div>