The Mid-Autumn festival

I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

Some time ago, I happened to see a very creative PPT on B station, yes! Is the PPT! In the POWERPOINT presentation is a transition scene, the visual effect looks pretty good. As a cut diagram front end, PPT can be made like this, if this in the web page to do transition show is not the same. This is a good idea to put into practice during the nuggets’ official Mid-Autumn Festival, nuggets 🐂🍺! Can I tell you I am greedy nuggets of prize not 🤤?

The final result

  

The above first! Can use expression pack to solve the problem, dig not type, hee hee.

This is what it looks like when it’s finished.

The text part can put some random messages, time timer, or 404, 500 some text tips and so on… It depends on your application scenario

This effect is still good drop, let’s achieve it together.

Implementation approach

I believe that the above effect of digging friends already know the simple implementation method, fried chicken is simple!! It would be more intuitive to replace it with elements. Let’s replace it with a simple radius element. First design the static effect of the page, will prepare the material relative to your page, adjust the size and position of the image, and then do a simple layout, like this (how to feel like cooking 😅)

  

Well.. Elements are hidden below, it seems that nothing can be seen 😅, right! This is the effect!! (Ramble)

Now that the static effect is complete, it’s time to add animations to make each element move.

For this issue, our main character is the moon, so everything else is moving towards the edge of the page,Leave space around the moon“Like a c-figure in a dance show. And while putting the text also want to reduce to be blocked by these elements as far as possible, block a little bit is also ok, divergent your imagination, maybe also can make naked eye 3D, large both visual sense!!

With all that said, all you have to do is zoom in and stretch out the elements and move them around. Because of the near large and far small, the mountain will be enlarged, it looks like the mountain is forward some, simple amplification is not enough, have to leave space in the middle ah, so let the elements offset to both sides can be.

And that’s when our heroThe moonCome up can 🌕

  

Finally, don’t forget the message you want to convey!

Ps: The above text description is step by step, but the animation is performed together

The specific process

The general process is to summarize the above ideas, plus a little detail can be HTML section

<! -- Text section -->
<h1 class="gradient">Mid-Autumn Festival Creative Contribution</h1>
<span class="spana gradient">MID AUTUMN DESIGN</span>
<h2>Send you a moon</h2>
<span class="spanb">MONTH FOR YOU</span>
<! - month - >
<div class="month"></div>
<! -- Mountains, here I put four "mountains", can put more -->
<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>
Copy the code

✍🏻~~ when all the elements are ready

/* Set the background color */
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%);
}

/* Text style */
/* All text is at the top level and needs to be absolutely positioned */
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; /* Set 3s when other elements are fixed in position, otherwise it will look messy. * /
}

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

/* Moon style */
.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);  /* Make the moon shine 🌟 */
  border-radius: 50%;
  animation: month 2s linear forwards;
}

/* The surrounding mountains */
.top..right..bottom..left {
  position: fixed;
  /* One more line of style is required, as illustrated in the animation section below
}

/* the 😥 code is already a bit long, I'll use one as an example, and the other "mountains" will be placed in the appropriate position */
.bottom {
  bottom: -121px;
  animation: bottom 2s linear forwards;
  z-index: 99;
}

.bottom img {
  width: 1920px;
}
Copy the code

The last is to let our elements move 🐱🏍 seagrass seagrass seagrass ~~~

@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; /* Do not let the theme text appear too quickly */
  }
  100% {
    opacity: 1; }}/* The moon is just right, let it rise slowly */
@keyframes month {
  0% {
    transform: translate(-50%, -66px);
  }
  50% {
    transform: translate(-50%, -132px);
  }
  100% {
    transform: translate(-50%, -198px); }}/* 😥 to reduce the amount of code, there is also a substitute */
/* First offset the position of the mountain, and then scale it according to the 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); }}/* * 🐝 Note: this is a bit of a problem, because the default scale is in the upper left corner of the element, and the scale will shift to the right * so we need to add transform-origin: center center; * /
Copy the code

You’re done

  

Shift the image of the surrounding mountains down or to the sides, and zoom in as you move. This will visually bring the peaks closer together, and of course leave room for our main character, the moon, to rise.

  

Finally, this example is extensible enough to replace the moon with a chang ‘e or meteor shower. Change the peak to xiangyun or wave 🌊 (wave reflection appears similar to hongmeng boot animation, this BI grid moment is not up, wonderful frog wonderful frog)

As for practicability, see your specific business demand cough up, if want to use, feel can use of the place or very much 🤔

Finally, I wish you a happy Mid-Autumn festival in advance 🥮~~