PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”, please see: Spring Festival Creative Submission Contest”

Every family will hang lanterns during the Spring Festival. The product manager said that our system will also hang lanterns during the Spring Festival. So in the React project, Div was drawn with a big red lantern.

React, less, and classNames are used in the project.

Structure and dismantling

The first is the dismantling of the lantern structure: hanging lamp thread, lamp body, lamp body mouth & mouth, lantern skeleton line, text, lamp spike.

// light body // light body mouth & bottom mouth, <div> // Lantern skeleton line - outer <div> // lantern skeleton line - inner <div> <div> </div> </div> </div> </div> <div > </div> </div>Copy the code

Lantern style

Add class to HTML structure, use classNames here, please install, if you don’t want to use it can change.

<div className={styles.deng}> // Hang lamp line <div className={styles.xian} /> // lantern skeleton line - outer <div <div className={classNames(styles.arc, styles.arca)}> Styles.arcb)}> // Text <div className={styles.dengtxt}> spring </div> </div> </div> </div> </div> // spike <div className={styles.sui}> // spike line <div className={styles.sui1} /> <div className={styles.sui2} /> </div> </div>Copy the code

The next step is to adjust the CSS style. The lantern size uses a fixed width and height. The main CSS is as follows.

The lamp body

Border-radius circle, red background, box-shadow with hazy lighting effect.

.deng { position: relative; width: 120px; height: 90px; margin: 30px; background: #d8000f; Background: RGBA (216, 0, 15, 0.8); border-radius: 50% 50%; // Box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); }Copy the code

The lights up line

Width and height adjust the thickness, background color control color, absolute positioning control position.

  .xian {
    position: absolute;
    top: -30px;
    left: 60px;
    width: 2px;
    height: 30px;
    background: #dc8f03;
  }
Copy the code

Lantern skeleton thread

Border controls thickness and color.

.arc { height: 90px; Background: RGBA (216, 0, 15, 0.1); border-radius: 50% 50%; border: 2px solid #dc8f03; }Copy the code
  • Lantern skeleton line – outer

Width control position.

  .arcA {
    width: 100px;
    margin: 12px 8px 8px 10px;
  }
Copy the code
  • Lantern skeleton line – inner layer

Width control position.

  .arcB {
    width: 45px;
    margin: -2px 8px 8px 26px;
  }
Copy the code

The text

Should also be able to replace with pictures, interested students can try their own.

.dengTxt { font-family: Arial, Lucida Grande, Tahoma, sans-serif; The font - size: 3.2 rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; }Copy the code

Light spike

  .sui {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
  }
Copy the code
  • Lamp fringe line
  .sui1 {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
  }
  .sui2 {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
  }
Copy the code

The lamp on the mouth

  .deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: ' ';
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }
Copy the code

The lamp on the mouth

  .deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: ' ';
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  }
Copy the code

The lantern will not move. If the wind blows, it will move. Then use animation+ Transform to add motion effect to the lantern.

Dynamic effect

Swing dynamic effect CSS.

@keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); }}Copy the code

Add motion effect to lamp and spike.

  .deng {
    transform-origin: 50% -100px;
    animation: swing 3s infinite ease-in-out;
  }
  .sui {
    transform-origin: 50% -45px;
    animation: swing 4s infinite ease-in-out;
  }
Copy the code

No giFs, please imagine.

A lantern is a little monotonous, hang a few more, directly copy the structure in front, most of the style can be reused.

Then all the lanterns were wrapped, the position of each lantern was adjusted using absolute positioning, and the dynamic time of each lantern was modified to create pseudo-random shaking.

The final result is as follows.

The complete code is below.

  • htmlPart.
<div className={classNames(styles.dengBox, styles.dengBox1)}> <div className={styles.deng}> <div className={styles.xian} /> <div className={classNames(styles.arc, styles.arcA)}> <div className={classNames(styles.arc, Styles. ArcB)}> <div className={styles.dengTxt}> spring </div> </div> </div> </div> <div className={styles.sui}> <div className={styles.sui1} /> <div className={styles.sui2} /> </div> </div> </div> <div className={classNames(styles.dengBox, styles.dengBox2)}> <div className={styles.deng}> <div className={styles.xian} /> <div className={classNames(styles.arc, styles.arcA)}> <div className={classNames(styles.arc, Styles.arcb)}> <div className={styles.dengtxt}> section </div> </div> </div> <div className={styles.sui}> <div className={styles.sui1} /> <div className={styles.sui2} /> </div> </div> </div> <div className={classNames(styles.dengBox, styles.dengBox3)}> <div className={styles.deng}> <div className={styles.xian} /> <div className={classNames(styles.arc, styles.arcA)}> <div className={classNames(styles.arc, Styles.arcb)}> <div className={styles.dengtxt}> </div> </div> </div> <div className={styles.sui}> <div className={styles.sui1} /> <div className={styles.sui2} /> </div> </div> </div> <div className={classNames(styles.dengBox, styles.dengBox4)}> <div className={styles.deng}> <div className={styles.xian} /> <div className={classNames(styles.arc, styles.arcA)}> <div className={classNames(styles.arc, Styles. ArcB)}> <div className={styles.dengTxt}> quick </div> </div> </div> </div> <div className={styles className={styles.sui1} /> <div className={styles.sui2} /> </div> </div> </div>Copy the code
  • cssPart.
@keyframes swing { 0% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } 100% { transform: rotate(-10deg); } } .dengBox { position: absolute; top: 0px; z-index: 9999; pointer-events: none; .deng { position: relative; width: 120px; height: 90px; margin: 30px; background: #d8000f; Background: RGBA (216, 0, 15, 0.8); border-radius: 50% 50%; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); transform-origin: 50% -100px; animation: swing 3s infinite ease-in-out; } .xian { position: absolute; top: -30px; left: 60px; width: 2px; height: 30px; background: #dc8f03; } .arc { height: 90px; Background: RGBA (216, 0, 15, 0.1); border-radius: 50% 50%; border: 2px solid #dc8f03; } .arcA { width: 100px; margin: 12px 8px 8px 10px; } .arcB { width: 45px; margin: -2px 8px 8px 26px; } .dengTxt { font-family: Arial, Lucida Grande, Tahoma, sans-serif; The font - size: 3.2 rem; color: #dc8f03; font-weight: bold; line-height: 85px; text-align: center; } .sui { position: relative; width: 5px; height: 20px; margin: -5px 0 0 59px; background: #ffa500; border-radius: 0 0 5px 5px; transform-origin: 50% -45px; animation: swing 4s infinite ease-in-out; } .sui1 { position: absolute; top: 18px; left: -2px; width: 10px; height: 35px; background: #ffa500; border-radius: 0 0 0 5px; } .sui2 { position: absolute; top: 14px; left: -2px; width: 10px; height: 10px; background: #dc8f03; border-radius: 50%; } .deng:before { position: absolute; top: -7px; left: 29px; height: 12px; width: 60px; content: ' '; display: block; z-index: 999; border-radius: 5px 5px 0 0; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } .deng:after { position: absolute; bottom: -7px; left: 10px; height: 12px; width: 60px; content: ' '; display: block; margin-left: 20px; border-radius: 0 0 5px 5px; border: solid 1px #dc8f03; background: #ffa500; background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03); } } .dengBox1 { left: 60px; .deng { animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } } .dengBox2 { left: 120px; .deng { animation: swing 4s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } } .dengBox3 { right: 60px; .deng { animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); } } .dengBox4 { right: 120px; .deng { animation: swing 4s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); }}Copy the code

This can be done with HTML and CSS, so it is portable if it is not a React project. The CSS in the above code does not do compatibility processing, need to pay attention to the migration.

Well, that’s all for the lantern. Spring Festival also made a fireworks, see the Spring Festival set off # Spring Festival with JS fireworks in the system.