中秋

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

前一段时间刚好在b站上看到一个非常有创意的PPT，没错！就是PPT！
在PPT里展示的是一段过渡转场，视觉效果看起来还挺不错的。作为一个切图前端，PPT都能做成这样，如果把这个放在网页中做过渡展示不一样美滋滋吗。
趁着掘金官方中秋活动，正好可以把这个方案实施一下，掘金🐂🍺！
难道我会告诉你我是馋掘金的奖品不成🤤？

最终效果

1631250334641_Trim 00_00_00-00_00_30.gif
先上图！能用表情包解决的问题，掘不打字，嘻嘻。
这是最终完成以后的效果。
文字部分可以放一些随机留言、时间计时器、或者404、500一些文字提示等等...具体看你的应用场景
这个效果还是不错滴吧，让我们一起实现它吧。

实现思路

我相信看了上面效果的掘友已经知道简单的实现方法了，炒鸡简单有没有！！
思路这边感觉用元素代替的话能更加直观一点，我们先用简单的方圆元素代替吧。
首先设计页面的静态效果，将准备好的素材相对于你的页面，调整好图片比例大小和位置，再简单做一下布局,类似这样（怎么感觉像是在做菜😅）

QQ图片20210910134537.png
呃。。元素都藏在下面了，貌似什么也看不到😅，对！就是这样的效果！！（强词夺理）
这样静态的效果就完成了，接下来添加动画效果让每个元素都动起来就可以了。
这一期我们的主角是月亮，所以其他的元素移动的方向就是向页面边缘位移，给月亮周围留出空间，就像是舞蹈表演里面的C位人物一样。而且一会儿放文字的时候也要尽量减少被这些元素遮挡住，遮挡一点也是可以的，发散你的想象力，说不定还能做出裸眼3D，大片既视感有没有！！
上面说了那么多，动画后的效果无非就是将元素放大拉伸，移动位置就好啦。由于近大远小，将山体放大，看起来山就向前了一些，单纯放大的话还不行，得给中间留出空间啊，所以再让元素向两侧偏移就可以了。
这时候再让我们的主角月亮上来就可以啦🌕
1631245344313 00_00_00-00_00_30.gif
最后，别忘了你想传达的文字！
ps：上面的文字描述是一步一步的，但是动画效果是一起执行的哦~

具体过程

大致过程呢就是将上面的思路总结一下，再加上一点点细节就可以啦
HTML部分

<!-- 文字部分 -->
<h1 class="gradient">中秋创意投稿</h1>
<span class="spana gradient">MID AUTUMN DESIGN</span>
<h2>送个月亮给你</h2>
<span class="spanb">MONTH FOR YOU</span>
<!-- 月 -->
<div class="month"></div>
<!-- 山，这里我放了四座“山”，也可以放更多 -->
<div class="top">
    <img src="./top.png" alt="">
</div>
<div class="right">
    <img src="./right.png" alt="">
</div>
<div class="bottom">
    <img src="./bottom.png" alt="">
</div>
<div class="left">
    <img src="./left.png" alt="">
</div>

所有元素准备好之后开始写样式吧✍🏻~~

/* 先给整体设置背景色 */
body {
   position: relative;
   width: 100vw;
   height: 100vh;
   margin: 0;
   padding: 0;
   background: linear-gradient(180deg, #0E275E 0%, #5A6F96 42%, rgba(197, 214, 229, 0.9) 100%);
}

/* 文字的样式 */
/* 所有文字都在最顶层，而且需要绝对定位 */
h1, h2, .spana, .spanb {
  position: absolute;
  z-index: 100;
}

h1 {
   top: 15%;
   left: 50%;
   transform: translate(-50%);
   font-size: 68px;
   letter-spacing: 15px;
   color: rgb(35, 71, 122);
   animation:H1 2s linear forwards;
}

.spana {
   top: 30%;
   left: 50%;
   transform: translate(-50%);
   font-size: 22px;
   letter-spacing: 30px;
   color: rgb(35, 71, 122);
   animation:H1 2s linear forwards;
}

.gradient {  
   background-image:-webkit-linear-gradient(top,rgb(101, 146, 187),#ffffff); 
   -webkit-background-clip:text; 
   -webkit-text-fill-color:transparent; 
}

h2 {
   top: 15%;
   left: 50%;
   transform: translate(-50%);
   font-size: 68px;
   color: rgb(35, 71, 122);
   letter-spacing: 20px;
   opacity: 0;
   animation:H2 3s linear forwards; /* 设置 3s 当其他元素固定位置以后再出现, 不然会显得很乱。 */
}

.spanb {
   top: 32%;
   left: 50%;
   transform: translate(-50%);
   font-size: 22px;
   color: rgb(35, 71, 122);
   letter-spacing: 30px;
   opacity: 0;
   animation:H2 3s linear forwards;
}

/* 月亮的样式 */
.month {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  width: 685px;
  height: 685px;
  background: linear-gradient(180deg, #FFE4C1 0%, #FFFFFF 100%);
  box-shadow: 0px 0px 99px rgba(255, 255, 255, 0.75);  /* 让月亮发光🌟 */
  border-radius: 50%;
  animation: month 2s linear forwards;
}

/* 周围的山脉 */
.top,
.right,
.bottom,
.left {
  position: fixed;
  /* 这里还需要一行样式，下面动画部分说明 */
}

/* 😥代码部分已经有点长了，我就用一个举例子吧，其他的“山脉”也根据合适的位置放好就可以啦 */
.bottom {
  bottom: -121px;
  animation: bottom 2s linear forwards;
  z-index: 99;
}

.bottom img {
  width: 1920px;
}

最后就是要让我们元素动起来了🐱‍🏍 海草海草海草海草 ~~~

@keyframes H1 {
  0% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -200px);
    opacity: .5;
  }
  100% {
    transform: translate(-50%, -400px);
    opacity: 0;
  }
}

@keyframes H2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0; /* 不要让主题文字太快显示出来 */
  }
  100% {
    opacity: 1;
  }
}

/* 月亮就中规中矩，让它缓缓升起就可以了 */
@keyframes month {
  0% {
    transform: translate(-50%, -66px);
  }
  50% {
    transform: translate(-50%, -132px);
  }
  100% {
    transform: translate(-50%, -198px);
  }
}

/* 😥为了减少代码量，这里也用一个代替啦，其他同理 */
/* 首先偏移山的位置，然后再根据放大的比例，scale一下就可以了 */
@keyframes bottom {
  0% {
    transform: translate(20px, 25px) scale(1.048);
  }
  50% {
    transform: translate(40px, 50px) scale(1.096);
  }
  100% {
    transform: translate(60px, 75px) scale(1.144);
  }
}

/* 
* 🐝注意： 这样写还是有问题的，因为 scale 的默认放大点是在元素的左上角，放大后位置会向右偏移
* 所以为了能让元素在中心点放大 需要在元素中加上 transform-origin: center center;
*/

大功告成

微信图片_20210910140054.png
将周围山峰的图片向下方或两侧偏移，移动的过程中再慢慢放大，这样视觉上就会达到使山峰距离更近的效果，当然也是为了给我们的主角“月亮”升起的时候留出空间。
1631250334641_Trim 00_00_00-00_00_30.gif
最后，这个例子可扩展性比较强，可以将月亮换成嫦娥或者流星雨；将山峰换成祥云或者海浪🌊（海浪倒影出现类似鸿蒙的开机动画，这BI格瞬间不就上来了，妙蛙妙蛙）
至于实用性，看你具体的业务需求咯，如果想用的话，感觉可以用到的地方还是挺多的🤔
最后的最后，提前祝大家中秋快乐咯🥮~~

送个月亮给你 | CSS制作简单过渡页✨

中秋

前言

最终效果

实现思路

具体过程

大功告成