§ ITPOW >> 文档 >> CSS

纯 CSS 3 动画实例-股票涨跌数量对决

作者:vkvi 来源:ITPOW(原创) 日期:2021-8-20

股票效果中,涨跌条柱动态变长使用纯 CSS 实现中间部分形状、箭头也是纯 CSS。效果如下:

股票涨跌数量对决

 代码如下:

<style type="text/css">
.duelBox { border-radius:2px; width:300px; height:4px; overflow:hidden; background:grey; }

@keyframes duel {
	0% { width:0; }
}
.duelBox .fall { display:flex; justify-content:flex-end; float:left; height:4px; overflow:hidden; background:green; animation:duel 0.5s ease-out; }
.duelBox .rise { display:flex; justify-content:flex-start; float:right; height:4px; overflow:hidden; background:red; animation:duel 0.5s ease-out; }

.duelBox .fall .anchor1 { float:right; width:4px; height:4px; background:linear-gradient(45deg, #fff 50%, grey 50%); }
.duelBox .fall .anchor2 { float:right; width:4px; height:4px; background:linear-gradient(45deg, green 50%, #fff 50%); }
.duelBox .rise .anchor1 { float:left; width:4px; height:4px; background:linear-gradient(45deg, grey 50%, #fff 50%); }
.duelBox .rise .anchor2 { float:left; width:4px; height:4px; background:linear-gradient(45deg, #fff 50%, red 50%); }




.duelNumber { margin-top:5px; width:300px; overflow:hidden; }

.duelNumber .fall { display:flex; justify-content:flex-end; float:left; }
.duelNumber .rise { display:flex; justify-content:flex-start; float:right; }

.duelNumber .fall .arrow { width:10px; height:12px; clip-path:polygon(30% 0, 70% 0, 70% 50%, 100% 50%, 50% 100%, 0 50%, 30% 50%); background:green; }
.duelNumber .fall .text { height:12px; overflow:hidden; padding-left:2px; font-size:12px; line-height:12px; }

.duelNumber .rise .arrow { width:10px; height:12px; clip-path:polygon(50% 0, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0 50%); background:red; }
.duelNumber .rise .text { height:12px; overflow:hidden; padding-right:2px; font-size:12px; line-height:12px; }
</style>




<div class="duelBox">
	<div class="fall" style="width:35%;"><div class="anchor2"></div><div class="anchor1"></div></div>
	<div class="rise" style="width:65%;"><div class="anchor1"></div><div class="anchor2"></div></div>
</div>

<div class="duelNumber">
	<div class="fall">
		<div class="arrow"></div>
		<div class="text">35 个品种跌</div>
	</div>

	<div class="rise">
		<div class="text">65 个品种涨</div>
		<div class="arrow"></div>
	</div>
</div>

相关阅读

相关文章