“I am participating in the Mid-Autumn Festival Creative Submission Contest. Please see: Mid-Autumn Festival Creative Submission Contest for details.”

preface

Touch fish, suddenly found digging gold sauce with activities to come, carefully looked at the topic reference.

Climb xx moon cake sales
Where do big data tell you to go on a Mid-Autumn Festival trip
How to make moon effects
Mid-Autumn Festival e-commerce page production
How to realize chang ‘e flying animation
Code to write poems (Mid-Autumn Festival related poems)
Technical articles about the moon
Use the CSS to implement various Mid-Autumn Festival elements

The recent project is still iterating, and the draft box is constantly stacked, so it is not suitable to send it out now. Originally do not know what to write, think for a long time did not get fancy CSS, before the early end of the HTML, CSS, JS, the most attractive to me or fancy CSS. Remember when I just learned to draw CSS fancy non-mainstream clock, imitation of an official website to add a batch of round seeding effect excited, write a Table TAB can also be proud for a while…… Taking advantage of this strength, with CSS to make some fancy things,CSS the whole chang e last month, here also wish digging friends happy Mid-Autumn Festival, touch fish career flourishing, as soon as possible to achieve wealth freedom, good health, all the best, by the way, thanks to an early age.

We wish each other a long life so as to share the beauty of this graceful moonlight, even though miles apart.

First a dark and windy night, a full moon hanging in the night sky.

The idea is simple, make a DIV and give some fancy CSS clothes.

HTML:

  <div class="moonback">

  </div>
Copy the code

CSS:

* {margin: 0;
  padding: 0;
}
.moonback {
  width: 100vw;
  height: 600vh;
  background-color: # 000;
  margin: 0 auto;
  position: relative;
}
.moonback::before {
  content: ",";
  display: block;
  position: absolute;
  left: 200px;
  top: 100px;
  width: 200px;
  height: 200px;
  background-color: #ff0;
  border-radius: 100px;
}
Copy the code

Use the fake element “before” to draw a full moon. Look at the effect. The moon is really big and round.

Single colon (:) for CSS3 pseudo-classes, double colon (: :) for CSS3 pseudo-elements.

Let’s have a little star and a lunar eclipse

Let’s use`before`Painting of the full moon, with`after`Animate the eclipse

    .moonback::after {
      content: "";
      display: block;
      position: absolute;
      left: 26px;
      top: 0px;
      width: 200px;
      height: 200px;
      background-color: # 000;
      border-radius: 100px;
      -webkit-animation: 8s dog linear infinite;
      -moz-animation: 8s dog linear infinite;
      animation: 8s dog linear infinite;
    }
      
    @-webkit-keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px; }}@-moz-keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px; }}@keyframes dog {
      0% {
        left: 27px;
        top: 0px;
      }

      100% {
        left: 399px;
        top: 216px; }}Copy the code

That’s enough code for an eclipse, so let’s see what happens.

with`before`+`after`+`content`Draw little stars that blink.

HTML:

  <div class="moonback">
    <div class="star"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
    <div class="star star5"></div>
    <div class="star star6"></div>
  </div>
Copy the code

CSS:

.star{   
  position: absolute;   
}   
.star2{
  top: 150px;
  left: 100px;
}
.star3{
  left: 150px;
}
.star4{
  top: 150px;
  left: 150px;
}
.star5{
  top: 150px;
  left: 500px;
}
.star6{
  top: 150px;
  left: 550px;
}
.star::before{   
  content: "★";   
  display: block;   
  position: absolute;   
  left: 10px;   
  top: 20px;   
  width: auto;   
  height: auto;   
  color: #fff;   
  -webkit-transform:scale(0.5);   
  -moz-transform:scale(0.5);   
  transform:scale(0.5);   
  -webkit-animation: 1s starlight linear infinite;   
  -moz-animation: 1s starlight linear infinite;   
  animation: 1s starlight linear infinite;   
}   
.star::after{   
  content: "★";   
  display: block;   
  position: absolute;   
  left: 40px;   
  top: 120px;   

  width: auto;   
  height: auto;   
  color: #fff;   
  -webkit-transform:scale(0.5);   
  -moz-transform:scale(0.5);   
  transform:scale(0.5);   

  -webkit-animation: 2s starlight linear infinite;   
  -moz-animation: 2s starlight linear infinite;   
  animation: 2s starlight linear infinite;   
}  
Copy the code

Let’s see how the little star works.

The moon has, the stars have, it is time to come to the moon

The simplest solution is to have a flying Chang ‘e and add some animation. Follow this train of thought za whole first see effect how! The goddess of the moon will not eclipse it first, the full moon hanging in the air, can send acacia bitter.

White dew for frost autumn thick, deciduous dust eventually meet, it is a year of Mid-Autumn Festival, away drunk acacia.

HTML:

  <div class="moonback">
    <div class="star"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
    <div class="star star5"></div>
    <div class="star star6"></div>
    <div class="img"></div>
  </div>
Copy the code

CSS:

.img {
  width: 300px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: url('./img/ce.gif');
  background-size: cover;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-animation: 20s moon linear infinite;
  -moz-animation: 20s moon linear infinite;
  animation: 20s moon linear infinite;
}

@keyframes moon {
  0% {
    left: 70%;
    top: 70%;
  }
  30% {
    left: 50%;
    top: 50%;
  }
  60% {
    left: 30%;
    top: 30%;
  }
  100% {
    left: 10%;
    top: 10%; }}Copy the code

Just a few lines of code to see what happens

All realize lunar eclipse, stars, chang ‘e to the moon code are here

Technical details area

The realization of the moon, eclipse, stars is used in THE CSS3 false elements, the moon is used in the cSS3 animation.

About pseudo-elements

define

Pseudo-elements masquerade as elements, but are not elements, as the name suggests, and are related to generating content. Generated content is primarily content created by the browser, not represented by logos or content. The generation of content is mainly achieved by :before and :after pseudo-elements, as well as :first-line,:first-letter and :: Selection

: : before and: afterIs used to add extra content to an element because it exists only before and after the element’s content
: : before and: afterThe inside of thecontentThe following three features are supported!
- String [” can be symbols or simple characters “, support Unicode encoding!!]
- Properties [attr(), you can get the element attributes on the tag, such as data-* custom attributes,title, Alt, etc.]
- Reference media file [url, you can link images as background images and so on.]
- Counter [counter()]

Use these two flexibly to do a lot of things, such as clearing floats, various additional visual effects [shadows, jumps, etc.]

usage

:before(IE7- browser not supported)

Insert the generated content at the very beginning of the element content

By default this pseudo-element is an inline element and inherits elements’ inheritable attributes; IE7- Must declare in browser! DOCTYPE, otherwise it doesn’t work

div:before{content:"Prefix"}
Copy the code

:after(IE7- browser not supported)

Insert the generated content at the end of the element content

By default this pseudo-element is an inline element and inherits elements’ inheritable attributes; IE7- Must declare in browser! DOCTYPE, otherwise it doesn’t work

div:after{content:"Suffix"}
Copy the code

Quick table

In addition to the ::before and ::after I use, there are many pseudo elements. Here is a quick list of pseudo elements

    /* Typographic Pseudo-elements */
    ::first-line            /* Selects the first line of the text block */
    ::first-letter          /* Selects the first character of the first line of the text block */

    /* Highlight Pseudo-elements */
    ::selection             /* Select the highlighted (anti-white) part of the document */
    ::inactive-selection    /* Select the highlighted (backwhite) part of the document in the inactive state */
    ::spelling-error        /* Selects text flagged by UA as misspelled */
    ::grammar-error         /* Selects text flagged by UA as syntactic error */

    /* Tree-Abiding Pseudo-elements */
    ::before                /* Creates a pre-child node */ in the selected element
    ::after                 /* Creates a trailing child node */ in the selected element
    ::marker                /* Select list automatically generated item marker */
    ::placeholder           /* Select field placeholder text (prompt) */
    
    /* WebVTT Format */
    ::cue                   /* Matches the WebVTT prompt */ in the selected element

    /* Fullscreen API */
    ::backdrop              /* Matches the background in full screen mode */
Copy the code

Focus on

【 Content attribute 】

The content attribute applies to before and after pseudo-elements

content:normal; (the default)content:<string>|<uri>|attr(<identifier>)
Copy the code

[1] The contents of

are displayed as they are, even if they contain some markup.

[Note 1] If you want to generate content with A newline, use \A

[Note 2] If a long string needs to be split into multiple lines, use \ to escape the newline character

div:before{
    content: "Paragraph 1 \ Paragraph 2";
}
div:after{
    content:"\ A suffix";
}
Copy the code

CSS3 animation

Introduction to the

The transition is a simple animation with a smooth transition between the beginning and end states.

Animation uses @keyframes to achieve more complex animation effects.

Like transition, animation is a composite property, Including animation-name, animation-duration, animation-timing-function, animation-delay, animation-rotund-count, and animation-direct Ion, animation-play-state and animation-fill-mode have 8 sub-attributes

Browser support

[Note]IE9- not supported; Safari4-8, ios3.2-8.4, Android2.1-4.4.4 need to add -webkit- prefix

Definitions and Usage

The animation property is a shorthand property that sets six animation properties:

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

Note: Always specify the animation-duration property, otherwise the animation will not play if the duration is 0.

Default value:	none 0 ease 0 1 normal
Inheritance:	no
Version:	CSS3
JavaScript syntax:	object.style.animation=”mymove 5s infinite”

grammar

animation: name duration timing-function delay iteration-count direction;
Copy the code

value	describe
animation-name	Specifies the name of the KeyFrame to bind to the selector.
animation-duration	Specifies the time, in seconds or milliseconds, to complete the animation.
animation-timing-function	Specifies the speed curve of the animation.
animation-delay	Specifies the delay before the animation begins.
animation-iteration-count	Specifies how many times an animation should play.
animation-direction	Specifies whether the animation should take turns playing backwards.

Write in the last

All realize lunar eclipse, stars, chang ‘e to the moon code are here

I am Liangcheng A, a front-end, love technology and love life.

I’m very happy to meet you.

If you want to learn more, please click here and look forward to your little ⭐⭐

If there are any errors, please correct them in the comments section. If this article helped you, please like 👍 and follow 😊
This article was first published in nuggets. Reprint is prohibited without permission 💌

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

CSS Mid-Autumn Festival special – Using CSS to realize chang ‘e moon

preface

First a dark and windy night, a full moon hanging in the night sky.

Let’s have a little star and a lunar eclipse

Let’s use`before`Painting of the full moon, with`after`Animate the eclipse

with`before`+`after`+`content`Draw little stars that blink.

The moon has, the stars have, it is time to come to the moon

Technical details area

About pseudo-elements

define

usage

Quick table

Focus on

CSS3 animation

Introduction to the

Browser support

Definitions and Usage

grammar

Write in the last

CSS Mid-Autumn Festival special – Using CSS to realize chang ‘e moon

preface

First a dark and windy night, a full moon hanging in the night sky.

Let’s have a little star and a lunar eclipse

Let’s usebeforePainting of the full moon, withafterAnimate the eclipse

withbefore+after+contentDraw little stars that blink.

The moon has, the stars have, it is time to come to the moon

Technical details area

About pseudo-elements

define

usage

Quick table

Focus on

CSS3 animation

Introduction to the

Browser support

Definitions and Usage

grammar

Write in the last

Related Posts

The problems I encountered in Keep-alive in VUE and the solutions

How do I center text in a div horizontally and vertically

Variable speed loading animation

Let’s use`before`Painting of the full moon, with`after`Animate the eclipse

with`before`+`after`+`content`Draw little stars that blink.