免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享
新浪微博
QQ空间
Facebook
Google+
Plurk
Twitter
Line
🌓黑暗模式
帖子

返回列表 发帖
查看: 237|回复: 0 收起左侧
开启左侧收起左侧开启左侧
上一主题 下一主题 打印

[分享] Sclub 论坛顶部喜庆灯笼代码   [复制链接]

無名
电梯直达 楼主
发表于 2023-1-8 21:38 | 只看该作者 倒序看帖 阅读模式
把下方的代码添加到广告位、网站第三方统计代码或其他头部信息。
  1. <!-- 灯笼1 -->
  2. <div class="deng-box1">
  3.         <div class="deng">
  4.                 <div class="xian"></div>
  5.                 <div class="deng-a">
  6.                         <div class="deng-b"><div class="deng-t">新</div></div>
  7.                 </div>
  8.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  9.         </div>
  10. </div>
  11. <!-- 灯笼2 -->
  12. <div class="deng-box2">
  13.         <div class="deng">
  14.                 <div class="xian"></div>
  15.                 <div class="deng-a">
  16.                         <div class="deng-b"><div class="deng-t">春</div></div>
  17.                 </div>
  18.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  19.         </div>
  20. </div>

  22. <!-- 灯笼3 -->
  23. <div class="deng-box3">
  24.         <div class="deng">
  25.                 <div class="xian"></div>
  26.                 <div class="deng-a">
  27.                         <div class="deng-b"><div class="deng-t">乐</div></div>
  28.                 </div>
  29.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  30.         </div>
  31. </div>

  33. <!-- 灯笼4 -->
  34. <div class="deng-box4">
  35.         <div class="deng">
  36.                 <div class="xian"></div>
  37.                 <div class="deng-a">
  38.                         <div class="deng-b"><div class="deng-t">快</div></div>
  39.                 </div>
  40.                 <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
  41.         </div>
  42. </div>
  43. <style>
  44. .deng-box1 {
  45.         position: fixed;
  46.         top: -30px;
  47.         left: 10px;
  48.         z-index: 9999;
  49.         pointer-events: none;
  50. }

  52. .deng-box2 {
  53.         position: fixed;
  54.         top: -25px;
  55.         left: 150px;
  56.         z-index: 9999;
  57.         pointer-events: none;
  58. }

  60. .deng-box3 {
  61.         position: fixed;
  62.         top: -28px;
  63.         right: 10px;
  64.         z-index: 9999;
  65.         pointer-events: none;
  66. }

  68. .deng-box4 {
  69.         position: fixed;
  70.         top: -26px;
  71.         right: 150px;
  72.         z-index: 9999;
  73.         pointer-events: none;
  74. }

  76. .deng-box1 .deng {
  77.         position: relative;
  78.         width: 120px;
  79.         height: 90px;
  80.         margin: 50px;
  81.         background: #d8000f;
  82.         background: rgba(216, 0, 15, 0.8);
  83.         border-radius: 50% 50%;
  84.         -webkit-transform-origin: 50% -100px;
  85.         -webkit-animation: swing 3s infinite ease-in-out;
  86.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  87. }

  89. .deng-box2 .deng {
  90.         position: relative;
  91.         width: 120px;
  92.         height: 90px;
  93.         margin: 50px;
  94.         background: #d8000f;
  95.         background: rgba(216, 0, 15, 0.8);
  96.         border-radius: 50% 50%;
  97.         -webkit-transform-origin: 50% -100px;
  98.         -webkit-animation: swing 4s infinite ease-in-out;
  99.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  100. }

  102. .deng-box3 .deng {
  103.         position: relative;
  104.         width: 120px;
  105.         height: 90px;
  106.         margin: 50px;
  107.         background: #d8000f;
  108.         background: rgba(216, 0, 15, 0.8);
  109.         border-radius: 50% 50%;
  110.         -webkit-transform-origin: 50% -100px;
  111.         -webkit-animation: swing 5s infinite ease-in-out;
  112.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  113. }

  115. .deng-box4 .deng {
  116.         position: relative;
  117.         width: 120px;
  118.         height: 90px;
  119.         margin: 50px;
  120.         background: #d8000f;
  121.         background: rgba(216, 0, 15, 0.8);
  122.         border-radius: 50% 50%;
  123.         -webkit-transform-origin: 50% -100px;
  124.         -webkit-animation: swing 4s infinite ease-in-out;
  125.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  126. }

  128. .deng-a {
  129.         width: 100px;
  130.         height: 90px;
  131.         background: #d8000f;
  132.         background: rgba(216, 0, 15, 0.1);
  133.         margin: 12px 8px 8px 10px;
  134.         border-radius: 50% 50%;
  135.         border: 2px solid #dc8f03;
  136. }

  138. .deng-b {
  139.         width: 45px;
  140.         height: 90px;
  141.         background: #d8000f;
  142.         background: rgba(216, 0, 15, 0.1);
  143.         margin: -2px 8px 8px 26px;
  144.         border-radius: 50% 50%;
  145.         border: 2px solid #dc8f03;
  146. }

  148. .xian {
  149.         position: absolute;
  150.         top: -50px;
  151.         left: 60px;
  152.         width: 2px;
  153.         height: 50px;
  154.         background: #dc8f03;
  155. }

  157. .shui-a {
  158.         position: relative;
  159.         width: 5px;
  160.         height: 20px;
  161.         margin: -5px 0 0 59px;
  162.         -webkit-animation: swing 4s infinite ease-in-out;
  163.         -webkit-transform-origin: 50% -45px;
  164.         background: #ffa500;
  165.         border-radius: 0 0 5px 5px;
  166. }

  168. .shui-b {
  169.         position: absolute;
  170.         top: 14px;
  171.         left: -2px;
  172.         width: 10px;
  173.         height: 10px;
  174.         background: #dc8f03;
  175.         border-radius: 50%;
  176. }

  178. .shui-c {
  179.         position: absolute;
  180.         top: 18px;
  181.         left: -2px;
  182.         width: 10px;
  183.         height: 35px;
  184.         background: #ffa500;
  185.         border-radius: 0 0 0 5px;
  186. }

  188. .deng:before {
  189.         position: absolute;
  190.         top: -7px;
  191.         left: 29px;
  192.         height: 12px;
  193.         width: 60px;
  194.         content: " ";
  195.         display: block;
  196.         z-index: 999;
  197.         border-radius: 5px 5px 0 0;
  198.         border: solid 1px #dc8f03;
  199.         background: #ffa500;
  200.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  201. }

  203. .deng:after {
  204.         position: absolute;
  205.         bottom: -7px;
  206.         left: 10px;
  207.         height: 12px;
  208.         width: 60px;
  209.         content: " ";
  210.         display: block;
  211.         margin-left: 20px;
  212.         border-radius: 0 0 5px 5px;
  213.         border: solid 1px #dc8f03;
  214.         background: #ffa500;
  215.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  216. }

  218. .deng-t {
  219.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  220.         font-size: 3.2rem;
  221.         color: #dc8f03;
  222.         font-weight: bold;
  223.         line-height: 85px;
  224.         text-align: center;
  225. }

  227. .night .deng-t,
  228. .night .deng-box,
  229. .night .deng-box1 {
  230.         background: transparent !important;
  231. }

  233. @-moz-keyframes swing {
  234.         0% {
  235.                 -moz-transform: rotate(-10deg)
  236.         }

  238.         50% {
  239.                 -moz-transform: rotate(10deg)
  240.         }

  242.         100% {
  243.                 -moz-transform: rotate(-10deg)
  244.         }
  245. }

  247. @-webkit-keyframes swing {
  248.         0% {
  249.                 -webkit-transform: rotate(-10deg)
  250.         }

  252.         50% {
  253.                 -webkit-transform: rotate(10deg)
  254.         }

  256.         100% {
  257.                 -webkit-transform: rotate(-10deg)
  258.         }
  259. }
  260. </style>
复制代码

最近看过此主题的会员

無名
访问时间:2023-04-06 19:20

上一篇： 已经是第一篇主题

下一篇： 支持手机端的html5 mp4视频播放器代码

点评
B Color Link Smilies

您还可以输入:个字符
X

 X

收藏收藏 顶 0 踩 0

返回列表 发帖
快速
返回顶部
 返回首页