当前位置: 首页 > Web前端 > HTML

元宵节在网站上挂个灯笼

时间:2023-03-28 19:45:53 HTML

.lantern-box{位置:相对;顶部:20px;左:-30px;z-指数:999;}.lantern-box1{位置:固定;顶部:20px;右:0px;z-指数:999;}.lantern-box1.lantern{位置:相对;宽度:120px;高度:90px;边距:50px;背景:#d8000f;背景:rgba(216、0、15、0.8);边界半径:50%50%;-webkit-transform-origin:50%-100px;-webkit-动画:摆动5秒无限缓入缓出;盒子阴影:-5px5px30px4pxrgba(252,144,61,1);}.lantern{位置:相对;宽度:120px;高度:90px;边距:50px;背景:#d8000f;背景:rgba(216、0、15、0.8);边界半径:50%50%;-webkit-transform-origin:50%-100px;-webkit-动画:摆动3秒无限缓入缓出;盒子阴影:-5px5px50px4pxrgba(250,108,0,1);}.lantern-a{宽度:100px;高度:90px;背景:#d8000f;背景:RGBA(216、0、15、0.1);边距:12px8px8px8px;边界半径:50%50%;边框:2px实心#dc8f03;}.lantern-b{宽度:50px;高度:90px;背景:#d8000f;背景:RGBA(216、0、15、0.1);边距:-4px8px8px26px;边界半径:50%50%;边框:2px实心#dc8f03;}.lines{位置:绝对;顶部:-20px;左:60px;宽度:2px;高度:20px;背景:#dc8f03;}.spike-a{位置:相对;宽度:5px;高度:20px;边距:-5px0059px;-webkit-动画:摆动4s无限缓入缓出;-webkit-transform-origin:50%-45px;背景:#ffa500;边界半径:005px5px;}.spike-b{位置:绝对;顶部:14px;左:-2px;宽度:10px;高度:10px;背景:#dc8f03;边界半径:50%;}.spike-c{位置:绝对;顶部:18px;左:-2px;宽度:10px;高度:35px;背景:#ffa500;边界半径:0005px;}.lantern:before{位置:绝对;顶部:-7px;左:29px;高度:12px;宽度:60px;内容:””;显示:块;z-指数:999;边界半径:5px5px00;边框:实心1px#dc8f03;背景:#ffa500;背景:线性渐变(向右,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.lantern:after{位置:绝对;底部:-7px;左:10px;高度:12px;宽度:60px;内容:“”;显示:块;左边距:20px;边界半径:005px5px;边框:实心1px#dc8f03;背景:#ffa500;背景:线性渐变(向右,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.lantern-t{font-family:ChineseXingkai,Arial,LucidaGrande,Tahoma,sans-serif;字体大小:3.2rem;颜色:#dc8f03;字体粗细:粗体;行高:85px;文本对齐:居中;}.night.lantern-t,.night.lantern-box,.night.lantern-box1{背景:透明!重要;}

.lantern-box{位置:相对;顶部:20px;左:-30px;z-指数:999;}.lantern-box1{位置:固定;顶部:20px;右:0px;z-指数:999;}.lantern-box1.lantern{位置:相对;宽度:120px;高度:90px;边距:50px;背景:#d8000f;背景:rgba(216、0、15、0.8);边界半径:50%50%;-webkit-transform-origin:50%-100px;-webkit-动画:摆动5秒无限缓入缓出;盒子阴影:-5px5px30px4pxrgba(252,144,61,1);}.lantern{位置:相对;宽度:120px;高度:90px;边距:50px;背景:#d8000f;背景:rgba(216、0、15、0.8);边界半径:50%50%;-webkit-transform-origin:50%-100px;-webkit-动画:摆动3秒无限缓入缓出;盒子阴影:-5px5px50px4pxrgba(250,108,0,1);}.lantern-a{宽度:100px;高度:90px;背景:#d8000f;背景:RGBA(216、0、15、0.1);边距:12px8px8px8px;边界半径:50%50%;边框:2px实心#dc8f03;}.lantern-b{宽度:50px;高度:90px;背景:#d8000f;背景:RGBA(216、0、15、0.1);边距:-4px8px8px26px;边界半径:50%50%;边框:2px实心#dc8f03;}.lines{位置:绝对;顶部:-20px;左:60px;宽度:2px;高度:20px;背景:#dc8f03;}.spike-a{位置:相对;宽度:5px;高度:20px;边距:-5px0059px;-webkit-动画:摆动4s无限缓入缓出;-webkit-transform-origin:50%-45px;背景:#ffa500;边界半径:005px5px;}.spike-b{位置:绝对;顶部:14px;左:-2px;宽度:10px;高度:10px;背景:#dc8f03;边界半径:50%;}.spike-c{位置:绝对;顶部:18px;左:-2px;宽度:10px;高度:35px;背景:#ffa500;边界半径:0005px;}.lantern:before{位置:绝对;顶部:-7px;左:29px;高度:12px;宽度:60px;内容:””;显示:块;z-指数:999;边界半径:5px5px00;边框:实心1px#dc8f03;背景:#ffa500;背景:线性渐变(向右,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.lantern:after{位置:绝对;底部:-7px;左:10px;高度:12px;宽度:60px;内容:“”;显示:块;左边距:20px;边界半径:005px5px;边框:实心1px#dc8f03;背景:#ffa500;背景:线性渐变(向右,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);}.lantern-t{font-family:ChineseXingkai,Arial,LucidaGrande,Tahoma,sans-serif;字体大小:3.2rem;颜色:#dc8f03;字体粗细:粗体;行高:85px;文本对齐:居中;}.night.lantern-t,.night.lantern-box,.night.lantern-box1{背景:透明!重要;}