猫咪六一儿童节贺卡动画特效详细代码

六一儿童节以可爱的猫咪为主题，同时加入了掉落的网页图标动画特效。

下面是静态效果，点击会有你想不到的效果，接着往下看

这款贺卡的制作大致分为两部分。首先，在 HTML 页面中布置层叠的卡片和一些装饰元素；其次，在 CSS 中实现动画效果。具体实现方法如下：

<section class="container">
  <input type="checkbox" id="card">
  <label class="card" for="card">
    <div class="ear-shadow"></div>
    <div class="ear-shadow ear-shadow_right"></div>
    <div class="eyes"></div>
    <div class="mouth"></div>
    <div class="nose"></div>
    <div class="mustache"></div>
    <div class="mustache mustache_right"></div>
    <div class="paw"></div>
    <div class="paw paw_right"></div>
    <div class="plate"> 六一儿童节 愿你开心六一</div>
    <div class="card card_back"></div>
  </label>
</section>
<section class="flakes">
  <span class="flake">😷</span>
  <span class="flake">💊</span>
  <span class="flake">🏥</span>
  <span class="flake">🧼</span>
  <span class="flake">🚑</span>
  <span class="flake">🦠</span>
  <span class="flake">🤒</span>
  <span class="flake">💸</span>
  <span class="flake">🧪</span>
  <span class="flake">👩‍⚕️</span>
</section>

设置卡片的样式，包括位置、边框和透明度等属性：

.card {
  position: relative;
  background: #f5f5f5;
  width: 50vmin;
  height: 70vmin;
  border-radius: 25vmin 25vmin 3vmin 3vmin;
  border-bottom: 0.5vmin solid #777;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0.4vmin 0.4vmin, rgba(0, 0, 0, 0.25) 0 0.8vmin 0.8vmin, rgba(0, 0, 0, 0.2) 0 1.6vmin 1.6vmin;
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAADMzMwAAACZZjP/zJlVVVW7u7vA84tnAAAAAXRSTlMAQObYZgAAAKBJREFUKM990DEKAjEQheHAnuARsn0G7eOOYC/ZAywyB7Cx9/6NmTS+RDBdfr6ZYkJQLYHfIq84lAvwjBxuwAomqm+AyZabQeGwYiCLAEAqFLKXB830YkzEw0wSk008OOG9ZjoOGTDsTWaITM5NQJkcAA9d6+4hfkndbSZ2zMQDdN6SfgLN3PsZKIgIstH5pb1a+f7+H8Op/hdLJ4GJj3wAtEwihNsbCogAAAAASUVORK5CYII="), default;
  transform: rotateX(0deg) rotateY(20deg) scale(1);
  transform-style: preserve-3d;
  transition: 1.5s ease-in-out;
  transition-property: transform;
}
.card::after, .card::before {
  content: "";
  position: absolute;
  top: -2vmin;
  left: 8vmin;
  width: 12vmin;
  height: 7vmin;
  border-radius: 6vmin 6vmin 0 0;
  background: #f5f5f5;
  box-shadow: 0 -0.3vmin 0.2vmin rgba(0, 0, 0, 0.1);
}
.card::after {
  transform: rotate(-10deg);
}
.card::before {
  left: calc(50vmin - 12vmin - 8vmin);
  transform: rotate(10deg);
}
.card_back {
  box-shadow: none;
  transform: translateZ(-0.1vmin);
}

最后，为装饰元素添加动画效果，例如为图标平移、旋转、变形等，可以使用 CSS 的 transition 和 transform 属性来实现。

在本例中，为图标添加随机的旋转和平移动画：

/*\
|*| Eears' Shadow
\*/
.ear-shadow {
  z-index: 1;
  position: absolute;
  top: -1vmin;
  left: 11vmin;
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  border-top: 0.5vmin solid rgba(180, 0, 0, 0.25);
  transform: rotate(-25deg);
}
.ear-shadow_right {
  transform: rotate(25deg);
  left: calc(50vmin - 8vmin - 11vmin);
}

/*\
|*| Eyes
\*/
.eyes {
  z-index: 1;
  position: absolute;
}
.eyes::after, .eyes::before {
  content: "";
  position: absolute;
  top: 15vmin;
  left: 10vmin;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  border-top: 1vmin solid #111;
}
.eyes::before {
  left: calc(50vmin - 10vmin - 10vmin);
}

/*\
|*| Nose
\*/
.nose {
  z-index: 1;
  position: absolute;
  top: 23vmin;
  left: 23.5vmin;
  width: 3vmin;
  height: 2vmin;
  border-radius: 50%;
  background: #d98695;
  box-shadow: inset 0.5vmin 0.3vmin 0.7vmin rgba(255, 255, 255, 0.8);
}

该动画会让它们从视窗上方逐渐落下、随机旋转360度，并沿着随机的路径消失在视窗下方。animation 属性定义了动画名称、持续时间、缓动函数和循环次数等，animation-delay 属性让每个元素有一定的时间差，以保证它们不是同时开始动画
代码下载：
https://download.csdn.net/download/ACCPluzhiqi/87842505