如何实现点击触发彩蛋裂开动画？

核心思路是移除元素默认的动画属性，通过JavaScript监听点击事件，动态给需要动画的元素添加包含动画的类，从而实现点击触发效果。

修改步骤： #

1. 调整CSS代码 #

• 移除.egg-top和.text中的默认animation属性
• 创建激活类.egg-top.active和.text.active，将原动画属性迁移至这些类中

2. 添加点击事件监听 #

给彩蛋容器绑定点击事件，点击时为目标元素添加激活类触发动画；如果需要支持重复点击，可通过先移除类再添加的方式重置动画。

修改后的完整代码 #

HTML（结构无需改动）

<div id="easter-egg-animation">
  <div class="easter-egg">
    <div class="egg">
      <div class="egg-top">
        <div class="day">1</div>
      </div>
    </div>
    <div class="egg-bottom"></div>
    <div class="shadow"></div>
    <div class="text">happy <br> easter</div>
  </div>
</div>

CSS

body {
  display: flex;
  background: grey;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
#easter-egg-animation {
  position: relative;
  cursor: pointer;
  transform: translate(-90%);
  transition-property: transform;
  transition-duration: 9s;
}
.egg {
  
}
.day {
  position: relative;
  align-items: center;
  justify-content: center;
  top: 45px;
  left: 65px;
  font-size: 30px;
  padding-top: 30px;
  color: white;
}
.egg-top {
  border-radius: 50% 50% 70% 30% / 100% 100% 0% 0%;
  background-color: pink;
  width: 140px;
  height: 120px;
  position: absolute;
  transform-origin: left;
  top: -20px;
  left: 0;
  right: 20px;
}
/* 点击激活时触发动画 */
.egg-top.active {
  animation: open .5s ease forwards .5s;
}
@keyframes open {
    0% {transform: rotate(0);}
    100% {transform: rotate(-150deg); top: 90px; left: -30px;}
}
.egg-bottom {
  border-radius: 0% 100% 50% 50% / 0% 0% 100% 100%;
  background-color: pink;
  width: 140px;
  height: 80px;
  position: relative;
  top: 100px;
}

.egg:before, .egg:after, .egg-top:before, .egg-bottom:before {
   content:"";
   position: absolute;
   border-style: solid;
}
.egg:before {
  top: -0px;
}
.egg:after {
  top: -0px;
  left: 140px;
}
.egg-top:before {
  top: 10px;
}
.egg-top:after {
  content:"";
  position: absolute;
  width: 25px;
  height: 60px;
  border-radius: 50%;
  transform: rotate(-27deg);
  top: 15px;
  left: 115px;
}
.shadow {
  position: absolute;
  width:220px;
  height:30px;
  background-color: rgba(0,0,0,.1);
  border-radius:50%;
  z-index:-1;
  top:147px;
  left:-27px;
}
.text {
  position: absolute;
  top: 110px;
  left: 45px;
  text-align: center;
  color: pink;
  font-size: 24px;
  z-index:-1;
  background-color: white;
  transform-origin: bottom;
}
/* 点击激活时触发动画 */
.text.active {
  animation: up 1s ease forwards 1.5s;
}
@keyframes up {
  0% {transform: translateY(0) scale(1);}
  100% {transform: translateY(-80px) scale(2);}
}

JavaScript

const eggContainer = document.getElementById('easter-egg-animation');
const eggTop = document.querySelector('.egg-top');
const text = document.querySelector('.text');

eggContainer.addEventListener('click', () => {
  // 移除类并强制浏览器重绘，实现重复点击触发动画
  eggTop.classList.remove('active');
  text.classList.remove('active');
  void eggTop.offsetWidth;
  void text.offsetWidth;
  
  eggTop.classList.add('active');
  text.classList.add('active');
});

内容的提问来源于stack exchange，提问作者Milou Z