点击图标时的HTML CSS飞行图像（复活节彩蛋）

我正在建立一个与货运网站的投资组合页面。我不是开发人员，对HTML和CSS也不是很了解。我在网上为此做了一些研究，但没有发现任何对我有帮助的东西。也许你们中的一些人可以帮助我

我只是想在我的网站上建立一个复活节彩蛋，它应该是这样工作的：点击一个图标就会触发这个css动画。此动画的代码直接来自cargo，但它仅在您进入页面时立即作为动画使用。如何将其隐藏在图标触发器后面

}

.传单{

animation: fly 50s linear infinite;
pointer-events: none !important;
top: 0;
left: 0;
transform: translateX(-120%) translateY(-120%) rotateZ(0);
position: fixed;
animation-delay: 1s;
z-index: 999999;

}

/*关键帧值控制元素的起始位置 并在屏幕上结束其轨迹。每条规则 表示元素在屏幕上的路径*/

@关键帧飞行{

98.001%, 0% {
            display: block;
    transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}

15% {
    transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}

15.001%, 18% {
    transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}

40% {
    transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}

40.001%, 43% {
    transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}

65% {
    transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}

65.001%, 68% {
    transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}

95% {
    transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}

---

}步骤1：在HTML中添加按钮

<button onClick="animEgg()">
  <i class="fas fa-egg"></i> <span id='toggleText'>Start</span>
</button>

步骤4：添加JS（希望jQuery库被链接）

---

除了触发它之外，所有的组成部分都在那里

只需要通过添加一个专门用于动画属性的类来触发动画。。。像这样的

let elem=document.querySelector（“.flier”）
let trigger=document.querySelector（'.activate'）
trigger.addEventListener（'click'，function（）{
元素classList.toggle（'active'）；
触发器.classList.toggle（'active'）；
})

.flier{
指针事件：无；
排名：0；
左：0；
转换：translateX（-120%）translateY（-120%）rotateZ（0）；
位置：固定；
z指数：999999；
}
.flier.active{
动画：飞50秒线性无限；
动画延迟：1s；
}
.激活{
显示：内联块；
填料：2米；
背景：红色；
颜色：白色；
}
.激活{
显示：内联块；
填料：2米；
背景：绿色；
颜色：白色；
}
@关键帧飞行{
98.001%, 0% {
显示：块；
变换：translateX（-200%）translateY（100vh）旋转（0度）
}
15% {
变换：translateX（100vw）translateY（-100%）rotateZ（180度）
}
15.001%, 18% {
变换：translateX（100vw）translateY（-30%）rotateZ（0度）
}
40% {
变换：translateX（-200%）translateY（3vh）rotateZ（-180度）
}
40.001%, 43% {
变换：translateX（-200%）translateY（-100%）rotateZ（-180度）
}
65% {
变换：translateX（100vw）translateY（50vh）rotateZ（0度）
}
65.001%, 68% {
变换：translateX（20vw）translateY（-200%）rotateZ（180度）
}
95% {
变换：translateX（10vw）translateY（100vh）rotateZ（0度）
}
}

---

您可以使用javascript/jquery实现这一点

98.001%, 0% {
            display: block;
    transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
}

15% {
    transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
}

15.001%, 18% {
    transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
}

40% {
    transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
}

40.001%, 43% {
    transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
}

65% {
    transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
}

65.001%, 68% {
    transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
}

95% {
    transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
}

<button onClick="animEgg()">
  <i class="fas fa-egg"></i> <span id='toggleText'>Start</span>
</button>

<div class="flier">
  <img src="https://picsum.photos/200/300" />
</div>

.flier > * {
/* Adjust animation duration to change the element’s speed */
       
        pointer-events: none !important;
    top: 0;
    left: 0;
    transform: translateX(-120%) translateY(-120%) rotateZ(0);
    position: fixed;
    animation-delay: 1s;
    z-index: 999999;
}

.flier img.anim{
   animation: fly 50s linear infinite;
}

 /* Keyframe values control where the element will begin
    and end its trajectory across the screen. Each rule
    represents a path the element follows across the screen. */


@keyframes fly {

    98.001%, 0% {
                display: block;
        transform: translateX(-200%) translateY(100vh) rotateZ(0deg)
    }

    15% {
        transform: translateX(100vw) translateY(-100%) rotateZ(180deg)
    }

    15.001%, 18% {
        transform: translateX(100vw) translateY(-30%) rotateZ(0deg)
    }

    40% {
        transform: translateX(-200%) translateY(3vh) rotateZ(-180deg)
    }

    40.001%, 43% {
        transform: translateX(-200%) translateY(-100%) rotateZ(-180deg)
    }

    65% {
        transform: translateX(100vw) translateY(50vh) rotateZ(0deg)
    }

    65.001%, 68% {
        transform: translateX(20vw) translateY(-200%) rotateZ(180deg)
    }

    95% {
        transform: translateX(10vw) translateY(100vh) rotateZ(0deg)
    }
}

function animEgg(){
    $(".flier img").toggleClass('anim');
  if($("#toggleText").text() == 'Start')
   $("#toggleText").text('Stop');
   else
   $("#toggleText").text('Start');
}