股票效果中,涨跌条柱动态变长使用纯 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>
相关阅读