2.5D 动效的实现我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！基础结构搭建此时界面效果如下图所示：

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

基本思路

创建一个父元素，形成一个舞台，所有的元素的形变都在该舞台中执行
将元素逐个定位到对应的位置上，形成静态页面
依次为所有需要执行动效的元素添加

基础结构搭建

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      html,
      body{
        margin: 0;
        padding: 0;
				position: relative;
				width: 100vw;
				height: 100vh;
				background-color: #161618;
      }

			.banner {
				width: 444px;
        height: 430px;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background: url('./images/bg.jpg') center bottom/contain no-repeat;
			}

			.container {
				width: 100%;
				height: 100%;
				background: url(./images/banner.png) center bottom/contain no-repeat;
			}

      .arraw {
				position: absolute;
        top: 120px;
        left: 111px;
			}

			.lightA {
				position: absolute;
        top: 228px;
        left: 168px;
			}

			.lightB {
				position: absolute;
        top: 265px;
        left: 240px;
			}

			.card {
				position: absolute;
        top: 228px;
        left: 168px;
			}

			.lingxA {
        position: absolute;
        top: 194px;
        left: 126px;
        opacity: 1;
      }

      .lingxB {
        position: absolute;
        top: 163px;
        left: 79px;
        opacity: 1;
      }

      .lingxC {
        position: absolute;
        top: 179px;
        left: 189px;
        opacity: 1;
      }

      .lingxD {
        position: absolute;
        top: 103px;
        left: 160px;
        opacity: 1;
      }

      .lingxE {
        position: absolute;
        top: 104px;
        left: 95px;
        opacity: 1;
      }

      .lingxF {
        position: absolute;
        top: 84px;
        left: 144px;
        opacity: 1;
      }

			.chaunB {
        position: absolute;
        top: 38px;
        left: 318px;
      }

      .chaunC {
        position: absolute;
        top: 60px;
        left: 318px;
      }

      .tuA {
        position: absolute;
        top: 140px;
        left: 316px;
      }

      .tuAa {
        position: absolute;
        top: 140px;
        left: 316px;
      }

			.ziA {
        position: absolute;
        top: 114px;
        left: 320px;
      }

      .ziB {
        position: absolute;
        top: 144px;
        left: 339px;
      }

      .ziC {
        position: absolute;
        top: 91px;
        left: 349px;
      }

			.ma {
        position: absolute;
        top: 247px;
        left: 303px;
      }

      .tuMing {
        opacity: 0;
      }

      .ren {
        position: absolute;
        top: 283px;
        left: 330px;
      }
    </style>
  </head>
  <body>
    <div class="banner">
			<div class="container">
				<img class="arraw" src="./images/tuB.png" />
				<img class="lightA" src="./images/guang.png" />
				<img class="lightB" src="./images/guang.png" />
				<img class="card" src="./images/tuC.png" />

				<img class="lingxA" src="./images/lingxA.png" />
				<img class="lingxB" src="./images/lingxB.png" />
				<img class="lingxC" src="./images/lingxC.png" />
				<img class="lingxD" src="./images/lingxD.png" />
				<img class="lingxE" src="./images/lingxE.png" />
				<img class="lingxF" src="./images/lingxF.png" />

				<img class="chaunB" src="./images/chaunB.png" />
				<img class="chaunC" src="./images/chaunB.png" />
				<img class="tuA" src="./images/tuA.png" />
				<img class="tuAa" src="./images/tuA.png" />

				<img class="ziA" src="./images/ziA.png" />
				<img class="ziB" src="./images/ziB.png" />
				<img class="ziC" src="./images/ziC.png" />

				<img class="ma tuAn" src="./images/tuAn.png" />
				<img class="ma tuMing" src="./images/tuMing.png" />

				<img class="ren" src="./images/ren.png" />
			</div>
    </div>
  </body>
</html>

此时界面效果如下图所示：

添加动画

箭头 - 上下浮动动画

@keyframes arraw {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }

  100% {
    transform: translateY(0px);
  }
}

光 - 位移动画

@keyframes lightA {
  60% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		transform: translate(-110px, -68px);
	}
}

@keyframes lightB {
  60% {
		opacity: 0;
	}

	100% {
		opacity: 0;
		transform: translate(60px, 33px);
	}
}

卡片 - 执行动画后停顿一段时间

@keyframes card {
	0% {
		opacity: 0;
	}

  /* 在50% ~ 100%之间的时候动效维持不动 */
	50%, 100% {
		opacity: 1;
		transform: translate(40px, 20px);
	}
}

字体抖动 - 重复样式的合并

@keyframes ziA{
  /*
  	对于重复的样式可以合并在一起进行编写
  */
  0%, 20%, 40%, 60%, 80% {
    transform: translateY(0);
  }
  
  10%, 50% {
      transform: translateY(-4px);
  }
  
  30%, 70% {
      transform: translateY(4px);
  }
}

闪烁动画

闪烁动画的本质是一张浅色图和一张深色图

深色图盖在了浅色图上边，通过不断的让深色图的透明度在0到1之间切换从而实现闪烁的效果

<!-- 浅色图 -->
<img class="ma tuAn" src="https://s3.bmp.ovh/imgs/2022/09/25/51b407de76c5f5e6.png" />

<!-- 深色图 - 盖在浅色图的上边 -->
<img class="ma tuMing" src="https://s3.bmp.ovh/imgs/2022/09/25/db92993b6942ab84.png" />

@keyframes tuMing {
	100% {
		opacity: 1;
	}
}

/* 通过不断调整深色图的透明度来达到闪烁的效果 */
animation: tuMing 0.5s ease infinite;

最终效果

2.5D动效的实现