当前位置：网站首页>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.
边栏推荐
- Wechat has new functions, and the test is started again
- Docker install MySQL
- User login function: simple but difficult
- How to send mail with Jianmu Ci
- Unity 从Inspector界面打开资源管理器选择并记录文件路径
- 21个战略性目标实例，推动你的公司快速发展
- How to write a summary of the work to promote the implementation of OKR?
- Zephyr study notes 2, scheduling
- SQL注入测试工具之Sqli-labs下载安装重置数据库报错解决办法之一(＃0{main}thrown in D:\Software\phpstudy_pro\WWW\sqli-labs-……)
- zabbix监控系统自定义监控内容
猜你喜欢
Wechat has new functions, and the test is started again
![[network security] what is emergency response? What indicators should you pay attention to in emergency response?](/img/2e/96da79d82ae2c49a3a0ab9909467ac.jpg)
[network security] what is emergency response? What indicators should you pay attention to in emergency response?
BUUCTF(4)
SQL注入测试工具之Sqli-labs下载安装重置数据库报错解决办法之一(＃0{main}thrown in D:\Software\phpstudy_pro\WWW\sqli-labs-……)
ZABBIX monitoring system custom monitoring content
论文学习——基于极值点特征的时间序列相似性查询方法
This monitoring system can monitor the turnover intention and fishing all, and the product page has 404 after the dispute appears
Write a thread pool by hand, and take you to learn the implementation principle of ThreadPoolExecutor thread pool
墨者学院-phpMyAdmin后台文件包含分析溯源
![[Flink] temporal semantics and watermark](/img/4d/cf9c7e80ea416155cee62cdec8a5bb.jpg)
[Flink] temporal semantics and watermark
随机推荐
L2-013 red alarm (C language) and relevant knowledge of parallel search
在所有SwiftUI版本(1.0-4.0)中原生实现Charts图表视图之思路
Thesis learning -- time series similarity query method based on extreme point characteristics
【Go基础】1 - Go Go Go
Write a thread pool by hand, and take you to learn the implementation principle of ThreadPoolExecutor thread pool
zabbix監控系統自定義監控內容
How to improve your system architecture?
2022-021ARTS：下半年开始
BUUCTF(4)
JVM -- class loading process and runtime data area
Leetcode 23. 合并K个升序链表
谷歌官方回应：我们没有放弃TensorFlow，未来与JAX并肩发展
时序数据库 InfluxDB 2.2 初探
Set and modify the page address bar icon favicon ico
Flask 常用组件
Email alarm configuration of ZABBIX monitoring system
Text processing function sorting in mysql, quick search of collection
21个战略性目标实例，推动你的公司快速发展
深入浅出：了解时序数据库 InfluxDB
L1-030 one gang one (15 points)