У меня есть bar chart
, на элементах которого используется градиентный фон.
Высота градиента постоянна, и я применяю clip path
, чтобы обрезать и показать только оставшуюся часть полосы.
Таким образом, самая темная часть всегда на высоте 100%
Проблема, состоит в том, чтобы анимировать каждый bar
от 0px
высоты до его заданной величины.
Сначала я попытался анимировать clip-path
, используя анимацию, transition
и transform
. Но не получилось.
Затем я попытался анимировать сам bar
- и это вроде как работает. Только это идет сверху вниз, а не снизу вверх. https://jsfiddle.net/ytvag42n/3/
Как я могу заставить бары расти снизу?
.barChart { clear: both; height: 70px; width: 170px; border-bottom: solid 2px #eee; }
.bar {
float: left;
margin: 4px;
width: 6px;
background: linear-gradient(to top, #8BC2CA 0%, #2E92A0 100%);
animation: expandBar 2s ease;
animation-fill-mode: forwards;
}
.bar1 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar2 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar3 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar4 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar5 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar6 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar7 { clip-path: inset(80% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar8 { clip-path: inset(20% 0 0 0 round 1.5px 1.5px 0px 0px); }
.bar9 { clip-path: inset(60% 0 0 0 round 1.5px 1.5px 0px 0px); }
@keyframes expandBar{
0% {
height: 0;
}
100%{
height: 60px;
}
}
<div class="barChart">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
</div>
bar
(результат в вопросе всмысле), напоминают лого Cisco :) Есть что-то общее – user262779 12 мар '19 в 15:35