当前位置：网站首页>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.
边栏推荐
- 2022-021ARTS：下半年开始
- Figure guessing game
- BUUCTF(4)
- Handwritten easy version flexible JS and source code analysis
- Blue Bridge Cup Quick sort (code completion)
- Do you know about autorl in intensive learning? A summary of articles written by more than ten scholars including Oxford University and Google
- Zephyr 学习笔记2，Scheduling
- zabbix监控系统部署
- PCIe knowledge points -010: where to get PCIe hot plug data
- How to send mail with Jianmu Ci
猜你喜欢
Text processing function sorting in mysql, quick search of collection
Take you to master the formatter of visual studio code
Zephyr 學習筆記2，Scheduling
Email alarm configuration of ZABBIX monitoring system
Write a thread pool by hand, and take you to learn the implementation principle of ThreadPoolExecutor thread pool
![[C language] open the door of C](/img/e0/2f107966423d6492c39995c77a445e.jpg)
[C language] open the door of C
L2-013 red alarm (C language) and relevant knowledge of parallel search
How to send mail with Jianmu Ci
BUUCTF(4)
墨者学院-phpMyAdmin后台文件包含分析溯源
随机推荐
L1-027 rental (20 points)
Zephyr 学习笔记1，threads
[untitled] notice on holding "2022 traditional fermented food and modern brewing technology"
谷歌官方回应：我们没有放弃TensorFlow，未来与JAX并肩发展
Go h*ck yourself:online reconnaissance (online reconnaissance)
在所有SwiftUI版本(1.0-4.0)中原生实现Charts图表视图之思路
促进OKR落地的工作总结该如何写？
Système de surveillance zabbix contenu de surveillance personnalisé
Implementation of ZABBIX agent active mode
Basic DOS commands
Heap concept in JVM
zabbix监控系统自定义监控内容
运动【跑步 01】一个程序员的半马挑战：跑前准备+跑中调整+跑后恢复（经验分享）
JVM中堆概念
Introduction to neural network (Part 2)
System architecture design of circle of friends
2022 - 021arts: début du deuxième semestre
BUUCTF(4)
真空介电常数和真空磁导率究竟是由什么决定的？为何会存在这两个物理量？
2022-021ARTS：下半年开始