<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body,
html {
width: 100%;
height: 100%;
background: url(./images/background.jpg) no-repeat;
background-size: 100% 100%;
}
.lamps {
position: absolute;
left: 60px;
/* transform: translateX(-50%); */
top: 170px;
}
.lamps_1 {
left: 440px;
}
.box {
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 577px;
width: 600px;
background: url(./images/bk.png) no-repeat;
background-size: 100% 100%;
}
.lamp {
width: 100px;
min-height: 100px;
position: relative;
/* border: 1px solid black; */
margin-top: 30px;
transform-origin: top;
animation: move 5s 1s infinite;
}
.lamp .lamp_1 {
height: 100px;
width: 50px;
background-color: rgb(253, 253, 36);
border-radius: 10px;
position: absolute;
left: 50%;
transform: translateX(-50%);
box-shadow: 2px 0px 5px rgb(68, 55, 55), 0px 0px 10px wheat inset;
}
.lamp .lamp_2 {
width: 100px;
height: 75px;
position: absolute;
top: 50%;
transform: translateY(-50%);
border-radius: 50px;
background-color: red;
box-shadow: 0px 0px 50px red, 0px 0px 10px wheat inset;
overflow: hidden;
}
.lamps .lamp_3 {
height: 100px;
width: 2px;
background-color: black;
opacity: .7;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0;
}
.lamp .border_1,
.lamp .border_2 {
height: 80px;
width: 80px;
position: absolute;
top: -3px;
left: 50%;
transform: translateX(-50%);
border: 1px solid black;
opacity: .5;
border-radius: 50%;
}
.lamp .lamp_2 span {
display: block;
font-size: 40px;
line-height: 75px;
text-align: center;
}
.lamp .border_2 {
width: 50px;
}
.content {
width: 400px;
height: 100px;
border: 10px solid red;
border-radius: 10px;
box-shadow: 0px 0px 10px black, 0px 0px 5px black inset;
background-color: salmon;
font-size: 75px;
line-height: 100px;
text-align: center;
margin: 50px auto;
}
button {
height: 50px;
width: 150px;
font-size: 20px;
border: 2px solid red;
border-radius: 5px;
background-color: salmon;
cursor: pointer;
opacity: .7;
box-shadow: 0px 0px 10px black;
position: absolute;
bottom: 50px;
left: 50%;
transform: translateX(-50%);
}
@keyframes move {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(10deg);
}
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(-10deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="box">
<!-- 灯笼1 -->
<div class="lamps">
<!-- 线 -->
<div class="lamp_3">
</div>
<div class="lamp">
<!-- 主体 金色矩形框-->
<div class="lamp_1">
</div>
<!-- 红色椭圆 -->
<div class="lamp_2">
<!-- 灯笼里的线 -->
<div class="border_1"></div>
<div class="border_2"></div>
<span>福</span>
</div>
</div>
</div>
<!-- 灯笼2 -->
<div class="lamps lamps_1">
<!-- 线 -->
<div class="lamp_3">
</div>
<div class="lamp">
<!-- 主体 金色矩形框-->
<div class="lamp_1">
</div>
<!-- 红色椭圆 -->
<div class="lamp_2">
<!-- 灯笼里的线 -->
<div class="border_1"></div>
<div class="border_2"></div>
<span>兔</span>
</div>
</div>
</div>
<!-- 祝福语框 -->
<div class="content">
</div>
<button>点击抽取祝福语</button>
</div>
<script>
let oBtn = document.querySelector('button');
let oCont = document.querySelector('.content');
let flag = false;
let arr = ["生意兴隆", "兔年大吉", "万事如意", "心想事成", "生龙活虎", "庆云跃日", "虎气十足", "荣华富贵", "金兔送喜"];
oCont.innerHTML = arr[0];
let num = 0;
//定时器让祝福语随机
set();
function set() {
t = setInterval(function() {
if (num >= arr.length - 1) {
num = 0;
} else {
num++;
}
console.log(num);
oCont.innerHTML = arr[num];
}, 100)
}
oBtn.onclick = function() {
flag = !flag;
oBtn.style = "box-shadow: 0px 0px 10px black, 0px 0px 5px black inset"
clearInterval(t);
if (!flag) {
oBtn.style = "box-shadow: 0px 0px 10px blackt";
set();
}
}
</script>
</body>
</html>
funcss-master.zip （14个子文件） 
funcss-master 
card.html 6KB denglong.html 6KB images 
fc3f9eda3a81060581607e747c56ee2b.png 1.33MB
background.jpg 212KB 540f3973a764336480cff7952ed43027.png 1.95MB xiaoxin_3.jpg 89KB xiaoxin_1.jpg 43KB xiaoxin_4.jpg 52KB wall.png 1.04MB bk.png 35KB images_xiaoxin.jpg 21KB xiaoxin_2.jpg 43KB 7da21092de33e16c58b69f58327dd5c7.png 787KB card_1.jpg 785KB资源评论
zcw11282023-01-16资源是宝藏资源，实用也是真的实用，感谢大佬分享~
M1122_1042023-01-28资源内容总结地很全面，值得借鉴，对我来说很有用，解决了我的燃眉之急。- 2301_761608602023-01-13这个资源值得下载，资源内容详细全面，与描述一致，受益匪浅。
Python代码大全
- 粉丝: 2836
- 资源: 686
最新资源
- sensors-18-03721.pdf
- Facebook.apk
- 推荐一款JTools的call-this-method插件
- json的合法基色来自红包东i请各位
- 项目采用YOLO V4算法模型进行目标检测，使用Deep SORT目标跟踪算法 .zip
- 针对实时视频流和静态图像实现的对象检测和跟踪算法 .zip
- 部署 yolox 算法使用 deepstream.zip
- 基于webmagic、springboot和mybatis的MagicToe Java爬虫设计源码
- 通过实时流协议 (RTSP) 使用 Yolo、OpenCV 和 Python 进行深度学习的对象检测.zip
- 基于Python和HTML的tb商品列表查询分析设计源码
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
