Получение этого счетчика, чтобы пометить цифры - PullRequest
Новая
       52

Получение этого счетчика, чтобы пометить цифры

0 голосов
/ 10 марта 2020

https://codepen.io/chadd/pen/gZeaBd

Это код, который я пытаюсь заставить работать на сайте с квадратным пространством.

Это что-то с препроцессором PUG или S CSS?

Я получил некомпилированное и то, и другое, но визуальные эффекты не перемещаются, они автоматически переводятся в число, на которое они должны помечаться после загрузки страницы.

Вот s css ... не уверен, что мне нужно что-то сделать, чтобы s css работал или он находится в java в коде ручки. там работает, только не мой сайт. 

.counters {
display: flex;
background: rgba($white, 0.75);
padding: 20px;
border-radius: 10px;
box-shadow: 5px 5px 20px rgba($black, 0.2);}

.counter {
letter-spacing: rem(2px);
line-height: 1;
position: relative;
display: flex;
overflow: hidden;
align-items: center;
height: rem(50px);
font-size: rem(50px);
margin: 0 rem(20px);
font-weight: 400;
& > span {
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 2s ease;
    transform: translateY(0);
    line-height: 1;
    span {
        flex: 0 0 100%;
        height: 100%;
    }
}
$d: 0;
$inc: 0.375;
@for $i from 1 through 20 {
    &:nth-child(#{$i}) > span {
        transition-delay: #{$d * 1s};
    }
    $d: $d + $inc;
}}



.counter:nth-child(1) {
color: #b82027;}
.counter:nth-child(3) {
color: #184895;}
.counter:nth-child(5) {
color: #009d00;}
.counter:nth-child(7) {
color: #828282;}
...