当前位置：网站首页>Put a lantern on the website during the Lantern Festival
Put a lantern on the website during the Lantern Festival
2022-07-04 07:45:00 【Monte Carlo method】
The Lantern Festival is coming , Put a lantern on the website , Also increase the festive atmosphere . Friends who like it can copy the code and debug it by themselves , The style can also be modified .
Relevant codes are referenced on the Internet , The implementation is simple , First add a background picture , The code implementation process is as follows ：
body {
background: url("./test.png");
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
Lanterns are used css The style is drawn , I thought the lanterns painted on the Internet were pictures , It used to be implemented in style , The code is as follows ：
<body>
<div class="lantern-box">
<div class="lantern">
<div class="lines"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="lantern-t"> element </div>
</div>
</div>
<div class="spike spike-a">
<div class="spike-c"></div>
<div class="spike-b"></div>
</div>
</div>
</div>
<div class="lantern-box1">
<div class="lantern">
<div class="lines"></div>
<div class="lantern-a">
<div class="lantern-b">
<div class="lantern-t"> Night </div>
</div>
</div>
<div class="spike spike-a">
<div class="spike-c"></div>
<div class="spike-b"></div>
</div>
</div>
</div>
<style type="text/css">
.lantern-box {
position: relative;
top: 20px;
left：-30px;
z-index: 999;
}
.lantern-box1 {
position: fixed;
top: 20px;
right: 0px;
z-index: 999;
}
.lantern-box1 .lantern {
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);
}
.lantern {
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);
}
.lantern-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;
}
.lantern-b {
width: 50px;
height: 90px;
background: #d8000f;
background: rgba(216, 0, 15, 0.1);
margin: -4px 8px 8px 26px;
border-radius: 50% 50%;
border: 2px solid #dc8f03;
}
.lines {
position: absolute;
top: -20px;
left: 60px;
width: 2px;
height: 20px;
background: #dc8f03;
}
.spike-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;
}
.spike-b {
position: absolute;
top: 14px;
left: -2px;
width: 10px;
height: 10px;
background: #dc8f03;
border-radius: 50%;
}
.spike-c {
position: absolute;
top: 18px;
left: -2px;
width: 10px;
height: 35px;
background: #ffa500;
border-radius: 0 0 0 5px;
}
.lantern: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);
}
.lantern: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);
}
.lantern-t {
font-family: Chinese Xingkai , Arial, Lucida Grande, Tahoma, sans-serif;
font-size: 3.2rem;
color: #dc8f03;
font-weight: bold;
line-height: 85px;
text-align: center;
}
.night .lantern-t,
.night .lantern-box,
.night .lantern-box1 {
background: transparent !important;
}
</style>
</body>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
Animation effect is also used css Realized , The code is as follows ：
@-moz-keyframes swing {
0% {
-moz-transform: rotate(-10deg)
}
50% {
-moz-transform: rotate(10deg)
}
100% {
-moz-transform: rotate(-10deg)
}
}
@-webkit-keyframes swing {
0% {
-webkit-transform: rotate(-10deg)
}
50% {
-webkit-transform: rotate(10deg)
}
100% {
-webkit-transform: rotate(-10deg)
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
边栏推荐
- Go h*ck yourself:online reconnaissance (online reconnaissance)
- Flask 常用组件
- What are the work contents of operation and maintenance engineers? Can you list it in detail?
- Figure guessing game
- Text processing function sorting in mysql, quick search of collection
- 墨者学院-phpMyAdmin后台文件包含分析溯源
- Activiti常见操作数据表关系
- Comparison between applet framework and platform compilation
- zabbix监控系统邮件报警配置
- Heap concept in JVM
猜你喜欢
University stage summary
Xcode 14之大变化详细介绍
墨者学院-phpMyAdmin后台文件包含分析溯源
Flask 常用组件
This article is enough for learning advanced mysql
Chrome is set to pure black
Google's official response: we have not given up tensorflow and will develop side by side with Jax in the future
Zephyr 學習筆記2，Scheduling
Unity opens the explorer from the inspector interface, selects and records the file path
![[Gurobi] 简单模型的建立](/img/3f/d637406bca3888b939bead40b24337.png)
[Gurobi] 简单模型的建立
随机推荐
One of the general document service practice series
L1-028 judging prime number (10 points)
Text processing function sorting in mysql, quick search of collection
Activiti常見操作數據錶關系
zabbix监控系统部署
Practice (9-12 Lectures)
Div hidden in IE 67 shows blank problem IE 8 is normal
Docker install MySQL
zabbix 5.0监控客户端
Basic DOS commands
Node foundation ~ node operation
This monitoring system can monitor the turnover intention and fishing all, and the product page has 404 after the dispute appears
Application of isnull in database query
This article is enough for learning advanced mysql
Oracle-存储过程与函数
MYCAT middleware installation and use
PCIe knowledge points -010: where to get PCIe hot plug data
Take you to master the formatter of visual studio code
Chrome is set to pure black
Activiti common operation data table relationship