PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

In order to participate in the New Spring Festival submission contest essay activities, for this development of a small CSS special effects, also understand a lot of content in the development, just to show you

Lantern effect

First, draw a lantern model

The lantern model is painted with a large oval background color red for a straighter view

<div class="deng-box"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div class="deng-b"> <div "Class =" deng - t > section < / div > < / div > < / div > < div class = "shui shui - a" > < div class = "shui - c" > < / div > < div class = "shui - b" > < / div > </div> </div> </div> <div class="deng-box1"> <div class="deng"> <div class="xian"></div> <div class="deng-a"> <div Class = "deng - b" > < div class = "deng - t" > spring < / div > < / div > < / div > < div class = "shui shui - a" > < div class = "shui - c" > < / div > < div class="shui-b"></div> </div> </div> </div>Copy the code

These two models are styled

Before adding the style, the lantern needs to be fixed to the top. Finally, the two lanterns overlap and add a yellow shadow to make it more realistic

.deng-box, .box-left { position: fixed; top: -40px; right: -20px; z-index: 999; } .deng-box1, .box-left1 { position: fixed; top: -30px; right: 10px; z-index: 999; } .box-left { left: 20px; } .box-left1 { left: 10px; } .deng-box1 .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; Background: RGBA (216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 5s infinite ease-in-out; box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1); } .deng { position: relative; width: 120px; height: 90px; margin: 50px; background: #d8000f; Background: RGBA (216, 0, 15, 0.8); border-radius: 50% 50%; -webkit-transform-origin: 50% -100px; -webkit-animation: swing 3s infinite ease-in-out; box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1); }Copy the code

What it looks like after rendering

Line the lanterns with yellow lines

CSS method border: 2px solid #dc8f03; If you feel thick can be adjusted, line color is yellow RGBA (216, 0, 15, 0.1)

.deng-a { width: 100px; height: 90px; background: #d8000f; Background: RGBA (216, 0, 15, 0.1); margin: 12px 8px 8px 8px; border-radius: 50% 50%; border: 2px solid #dc8f03; } .deng-b { width: 45px; height: 90px; background: #d8000f; Background: RGBA (216, 0, 15, 0.1); margin: -4px 8px 8px 26px; border-radius: 50% 50%; border: 2px solid #dc8f03; }Copy the code

Use margin and border-radius to adjust the radian and spacing respectively

Add a yellow line to the bottom of the lantern

The yellow line is made up of two parts, the color is yellow, but one is thick and the other is thin. The widths are 10px and 60px

.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}

.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}

.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}

.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
Copy the code

Add a yellow border to the lantern, and the font color should also be bold and yellow

The gradient was linear-gradient(to right, # DC8F03, # FFa500, # DC8F03, # FFA500, # DC8F03), also with a little arc, not too much arc, and finally positioned to the upper and lower sides of the lantern

.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); }. Deng -T {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; } .night .deng-t, .night .deng-box, .night .deng-box1 { background: transparent ! important; }Copy the code

Let the lantern move

Rotate (-10deg),rotate(10deg),rotate(-10deg) and rotate(-10deg) are the same

@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }

    50% {
        -moz-transform: rotate(10deg)
    }

    100% {
        -moz-transform: rotate(-10deg)
    }
}
Copy the code

The last

In order to participate in the Spring Festival special activities, I wrote a small special effect for this, and also asked many colleagues and learned CSS. Next, I will continue to learn and develop some new effects (to show off to my friends).