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

preface

As the Mid-Autumn Festival is coming, as a programmer, in addition to enjoying the traditional customs: Moon, eat moon cakes, and family reunion, but also should reflect the programmer should have style, so this article through the front-end knowledge to achieve the moon and Mid-Autumn Festival related to the animation effect, in order to send different programmers to the same holiday wishes, I wish you a happy Mid-Autumn Festival in advance!

demand

With the help of front-end knowledge to achieve a simple chang ‘e moon animation. Chang ‘e and the moon are two separate parts, then prepare the chang ‘e and the moon materials, and finally through HTML+CSS to achieve the final animation effect.

material

1. Pictures of Chang ‘e and the Jade Rabbit;

2, the picture material of the moon.

code

Create a project project based on vue. Js, and then drag the material into the project, and then create a new HTML file, and finally achieve the effect of the core Chang ‘e flying to the moon in THE HTML file, the specific code is as follows:

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title> <title> <style type="text/ CSS "> *{margin: 0; padding: 0; } body{ background: #111111; } .wrap{ width: 470px; height: 470px; margin: 50px auto; border: 10px solid white; text-align: center; } .wrap .moon{ /* margin-top: 50px; */ margin-top: 20px; } .wrap .change{ position: relative; margin-top: -550px; margin-left: -350px; opacity: 0; /* Transition -duration: 3s; }.wrap:hover. Change {transition-duration: 2s; transform: translate(100px,100px); /* Opacity: 1; / * * / opaque} < / style > < / head > < body > < div class = "wrap" > < div class = "moon" > < img SRC = ".. / assets/img/moon. PNG "Alt =" "width =" 430 "height =" 430 "> / / the moon < / div > < div class =" change "> < img SRC =".. / assets/img/change. PNG "Alt =" "width =" 300 "height =" 300 "> / / chang e < / div > < / div > < / body > < / HTML >Copy the code

The effect

After the above operations, the animation effect of Chang ‘e flying to the moon with the Jade Rabbit is realized. The specific effect is shown as follows:

The attached:

At this moment, the situation, need to recite a poem to set off the atmosphere of the Mid-Autumn Festival:

A year autumn half moon Hua, condition is the Mid-Autumn festival when the rain. Heaven and earth endless scenery, may be collected in drunk reciting poetry.

The last

The above operation is just through the front-end knowledge to achieve a simple chang ‘e moon animation effect, in fact, there is a lot of room for improvement, but the space is limited no longer detailed improvement. Finally, once again to fight in the first line of work programmers salute, I wish you in the Mid-Autumn Festival is coming, can encounter less bugs, more touch fish, so that the combination of work and rest, health and longevity, ha ha, just kidding. No matter how busy you are, you must remember the Mid-Autumn Festival!

Welcome to pay attention to the wechat public account “Program Ape by Sanzhan” and the Sina Weibo account “Sanzhan 666”!