Как реализовать анимацию Celebration Confetti на 4-страничной загрузке? - PullRequest
Новая
       23

Как реализовать анимацию Celebration Confetti на 4-страничной загрузке?

0 голосов
/ 16 мая 2019

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

1 Ответ

2 голосов
/ 16 мая 2019

вы можете попробовать это: Фейерверк 

// Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
  $box-shadow: $box-shadow,
               random($width)-$width / 2 + px
               random($height)-$height / 1.2 + px
               hsl(random(360), 100, 50);
  $box-shadow2: $box-shadow2, 0 0 #fff

...

Или этот: конфетти 

@for $i from 0 through 150 {
    $w: random(8);
    $l: random(100);
    .confetti-#{$i} 
    {
        width: #{$w}px;
        height: #{$w*0.4}px;
        background-color: nth($colors, random(3));
        top: -10%;
        left: unquote($l+"%");
        opacity: random() + 0.5;
        transform: rotate(#{random()*360}deg);
        animation: drop-#{$i} unquote(4+random()+"s") unquote(random()+"s") infinite;
    }
...

Если вы хотите изменить размер пузыря, есть следующий класс: 

.pyro > .before, .pyro > .after {
    position: absolute;
    width: 5px;   // that one
    height: 5px;   // that one
    border-radius: 50%;
    box-shadow: $box-shadow2;

-> Если вы измените ширину или высоту, пузырьки адаптируются к выбранному вами размеру.

...