HTML CSS 单击图标时的飞行图像（彩蛋）

Question

我正在构建一个带有货物站点的投资组合页面。我不是开发人员，我对 HTML 和 CSS 没有真正的好主意。为此，我尝试在网上进行一些研究，但没有发现任何对我有帮助的东西。也许你们中的一些人可以帮助我。

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

https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen

<div class="flier">{image 1}</div>

.flier {
pointer-events: none;

}

.传单{

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;

}

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

@keyframes 飞{

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)
}

}

Answer 1

第一步：在HTML

中添加按钮

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

第 2 步：您的代码中包含要设置动画的图像

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

第三步：添加css

.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)
    }
}

Step4：添加JS（希望链接jQuery库）

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

Answer 2

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

只需要通过添加一个 class 专门用于动画属性来触发动画属性...类似这样的东西？

https://codepen.io/badgerswork/pen/wvzvWdW

let elem = document.querySelector('.flier')
let trigger = document.querySelector('.activate')
trigger.addEventListener('click', function() {
  elem.classList.toggle('active');
  trigger.classList.toggle('active');
})

.flier {
  pointer-events: none;
  top: 0;
  left: 0;
  transform: translateX(-120%) translateY(-120%) rotateZ(0);
  position: fixed;
  z-index: 999999;
}

.flier.active {
  animation: fly 50s linear infinite;
  animation-delay: 1s;
}

.activate {
  display: inline-block;
  padding: 2em;
  background: red;
  color: white;

}
.activate.active {
  display: inline-block;
  padding: 2em;
  background: green;
  color: white;
}

@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)
}
}

<div class="flier">
  <img src="https://via.placeholder.com/150" />
</div>
<a href="#" class="activate">Go</a>

HTML CSS 单击图标时的飞行图像（彩蛋）

HTML CSS Flying Image on Icon click (Easter egg)

html

css

animation

triggers

onclick