Question

我正在创建ionic 4应用程序，现在我想在页面加载以及页面包含显示内容时添加Confetti Animation。例如，假设我们赢了游戏，而庆典动画发生在同一页面上。

Answer 1

您可以尝试以下一种方法： Fireworks

// 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

...

或者那个： Confetti

@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;

->如果更改宽度或高度，气泡将适应您选择的大小。

如何在ionic 4页面加载上实现Celebration Confetti动画？

1 个答案: