新年要到了，老古董灯笼代码又要出场了

转载

新年要到了，老古董灯笼代码又要出场了

寻梦xunm| 226| 收集

7个月前

超过235天温馨提示

本文最后更新于2024年01月29日，已超过235天没有更新，若内容或图片失效，请留言反馈。

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style type="text/css">
        .deng-box {
  position:fixed;
  top:-40px;
  right:-20px;
  z-index:9999;
  pointer-events:none
}
.deng-box1 {
  position:fixed;
  top:-30px;
  right:10px;
  z-index:9999;
  pointer-events:none
}
.deng-box2 {
  position:fixed;
  top:-40px;
  left:-20px;
  z-index:9999;
  pointer-events:none
}
.deng-box3 {
  position:fixed;
  top:-30px;
  left:10px;
  z-index:9999;
  pointer-events:none
}
.deng-box1 .deng,
.deng-box3 .deng {
  position:relative;
  width:60px;
  height:45px;
  margin:50px;
  background:#d8000f;
  background:rgba(216,0,15,0.8);
  border-radius:50% 50%;
  transform-origin:50% -100px;
  animation:swing 5s infinite ease-in-out;
  box-shadow:-5px 5px 30px 4px #fc903d
}
.deng {
  position:relative;
  width:60px;
  height:45px;
  margin:50px;
  background:#d8000f;
  background:rgba(216,0,15,0.8);
  border-radius:50% 50%;
  transform-origin:50% -100px;
  animation:swing 3s infinite ease-in-out;
  box-shadow:-5px 5px 25px 4px #fa6c00
}
.deng-a {
  width:50px;
  height:45px;
  background:#d8000f;
  background:rgba(216,0,15,0.1);
  margin:6px 4px 4px 4px;
  border-radius:50% 50%;
  border:2px solid #dc8f03
}
.deng-b {
  width:27.5px;
  height:45px;
  background:#d8000f;
  background:rgba(216,0,15,0.1);
  margin:-2px 4px 4px 11px;
  border-radius:50% 50%;
  border:2px solid #dc8f03
}
.xian {
  position:absolute;
  top:-20px;
  left:30px;
  width:1px;
  height:10px;
  background:#dc8f03
}
.shui-a {
  position:relative;
  width:2.5px;
  height:10px;
  margin:-2.5px 0 0 15px;
  animation:swing 4s infinite ease-in-out;
  transform-origin:50% -45px;
  background:orange;
  border-radius:0 0 5px 5px
}
.shui-b {
  position:absolute;
  top:14px;
  left:-1px;
  width:5px;
  height:5px;
  background:#dc8f03;
  border-radius:50%
}
.shui-c {
  position:absolute;
  top:18px;
  left:-1px;
  width:10px;
  height:17.5px;
  background:orange;
  border-radius:0 0 0 5px
}
.deng:before {
  position:absolute;
  top:-7px;
  left:14.5px;
  height:6px;
  width:30px;
  content:" ";
  display:block;
  z-index:999;
  border-radius:5px 5px 0 0;
  border:solid 1px #dc8f03;
  background:orange;
  background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
}
.deng:after {
  position:absolute;
  bottom:-7px;
  left:5px;
  height:6px;
  width:30px;
  content:" ";
  display:block;
  margin-left:10px;
  border-radius:0 0 5px 5px;
  border:solid 1px #dc8f03;
  background:orange;
  background:linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
}
.deng-t {
  font-family:华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  font-size:1.6rem;
  color:#dc8f03;
  font-weight:700;
  line-height:42.5px;
  text-align:center
}
.night .deng-box,
.night .deng-box1,
.night .deng-t {
  background:0 0!important
}
@keyframes swing {
  0% {
    transform:rotate(-10deg)
  }
  50% {
    transform:rotate(10deg)
  }
  100% {
    transform:rotate(-10deg)
  }
}

    </style>
</head>
<body>
<div><div class="deng-box2"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">年</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box3"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">新</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box1"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">乐</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div><div class="deng-box"><div class="deng"><div class="xian"></div><div class="deng-a"><div class="deng-b"><div class="deng-t">快</div></div></div><div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div></div></div></div>
</body>
</html>

none

本作品采用知识共享许可协议知识共享署名-非商业性使用-禁止演绎 3.0 中国大陆许可协议进行许可授权。即要求您在需要转载、引用本文全文或者部分时，请按照协议要求署名，并在保证不进行任何修改、续写等演绎形式，并不用于商业性项目的情况下使用。如果本文有侵犯到您的权益，请直接向我们留言反馈。

0 赞 or 打赏

喜欢就打赏一点