Shulou(Shulou.com)06/02 Report--

This article Xiaobian introduces in detail for you "how to use CSS to achieve a festive lantern animation effect", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use CSS to achieve a festive lantern animation effect" can help you solve your doubts.

Animation attribute

Painting lanterns We certainly can not draw a static lantern, let's first review the animation property in CSS, which is an abbreviated property, composed of animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode and animation-play-state properties. Here we will not start to explain, you can go to MDN to learn.

Let's take a look at the following example:

Animation: swing 3s infinite ease-in-out

In the above example, an animation sequence called swing is used, the animation sequence is created by @ keyframes, the execution time is 3s, the animation loop is executed, and finally ease-in-out represents the rhythm of the animation execution.

Realization idea

Add border-radius to a rectangle to form the shape of a lantern.

Add:: before and:: after to the rectangle to form the top and head of the lantern

Draw a lantern line.

Add two thinner rectangles inside the rectangle to form the lantern lines by adding border-radius.

Animate the lantern

Add the style of the lamp ear

Next, we will implement it step by step.

Draw the shape of the lantern

First, we define the HTML structure. The code is as follows:

Then we draw an ellipse, and then through:: before and:: after, draw the upper and lower lantern covers, CSS as follows:

/ * Lantern container * / .lantern-con {position: fixed; left: 160px;} / * Red area in the middle of the lantern * / .lantern-light {position: relative; width: 120px; height: 90px; background-color: red; margin: 30px; border-radius: 50%; box-shadow:-5px 5px 50px 4px # fa6c00; / * set rotation point * / transform-origin: top center; animation: swing 3s infinite ease-in-out } / * Top and bottom styles of lanterns * / .lantern-light::before,.lantern-light::after {content:'; position: absolute; border: 1px solid # dc8f03; width: 60px; height: 12px; / * background gradient * / background: linear-gradient (to right, # dc8f03, # ffa500, # dc8f03, # ffa500, # dc8f03); left: 30px } / * Top position * / .lantern-light::before {top:-7px; border-top-left-radius: 5px; border-top-right-radius: 5px;} / * bottom position * / .lantern-light::after {bottom:-7px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;} / * style of thread holding lanterns * / .lantern-line {width: 2px; height: 50px Background-color: # dc8f03; position: absolute; left: 88px;} / * Animation of lanterns * / @ keyframes swing {0% {transform: rotate (- 6deg);} 50% {transform: rotate (6deg);} 100% {transform: rotate (- 6deg);}}

Now we have realized a basic lantern shape, and the effect is as follows:

Interior lines of lanterns

The inner line of the lantern is achieved by two rectangles, set to ellipse through the border-radius property, and then draw edges to render the lantern line.

lantern

The corresponding CSS is as follows:

/ * the line in the middle of the lantern * / .lantern-circle,.lantern-rect {height: 90px; border-radius: 50%; border: 2px solid # dc8f03; background-color: rgba (216,0,15,0.1);} / * outer * / .lantern-circle {width: 100px; margin: 12px 8px 8px 10px;} / * Inner layer * / .lantern-rect {margin:-2px 8px 8px 26px; width: 45px } / * text style * / .lantern-text {font-size: 28px; font-weight: bold; text-align: center; color: # dc8f03; margin-top: 4px;}

The effect is as follows:

Lantern spike

Now let's draw the lantern ear, this thing is relatively simple, the most important thing is to add an animation effect, its HTML structure is as follows:

CSS is as follows:

/ * lantern-tassel-top {width: 5px; height: 20px; background-color: # ffa500; border-radius: 00 5px 5px; position: relative; margin:-5px 00 59px; / * Let Lantern also have an animation effect * / animation: swing 3s infinite ease-in-out;} .lantern-tassel-middle,.lantern-tassel-bottom {position: absolute; width: 10px; left:-2px } .lantern-tassel-middle {border-radius: 50%; top: 14px; height: 10px; background-color: # dc8f03; z-index: 2;} .lantern-tassel-bottom {background-color: # ffa500; border-bottom-left-radius: 5px; height: 35px; top: 18px; z-index: 1;}

At this point, we have finished painting the lantern.

Read here, this "how to use CSS to achieve a festive lantern animation effect" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more about the article, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.