[CSS] 서서히 증가하는 막대 그래프 구현

💡 목표

서서히 증가하는 막대그래프 구현

 

📌 HTML

<div class="graphWrap">
  <div class="graph" >
    <div id="item1" class="p-100"></div>
    <div id="item2" class="p-50"></div>
  </div>
</div>

 

📌 CSS

/* reset */
ul { list-style: none; }
div, ul, li { margin: 0; padding: 0; }

/* 그래프 */
.graphWrap { position: relative; width: 300px; height: 300px; margin: 20px auto 0; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa;  }
.graphWrap .graph > div { position: absolute; bottom: 0; width: 69px; border-radius: 50px 50px 0 0; }
.graphWrap .graph > div#item1 { left: 60px; background: #ddd; }
.graphWrap .graph > div#item2 { left: 180px; background: #aaa; }

/* 애니메이션 */
.p-100{ height: 300px; animation:p-100 2s; }
.p-50 { height: 150px; animation:p-50 2s; }

@keyframes p-100{from{height:0px}to{height: 300px}}
@keyframes p-50{from{height:0px}to{height: 150px}}

 

 

💛 결과물

 

 

 

 

Html 아이콘 제작자: Freepik - Flaticon
Css 아이콘 제작자: Freepik - Flaticon
자바 스크립트 아이콘 제작자: Rmpp - Flaticon

11,072종의 무료 html 아이콘