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).