查看: 100|回复: 0

[文章教程] 快春节了,给你的网站添加两个灯笼!

[复制链接]
xuanxiao 发表于 2024-2-1 11:10:15 | 显示全部楼层 |阅读模式
效果如图: 微信截图_20240201110937.png

  1. <!-- 灯笼1 -->
  2. <div class="deng-box">
  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-box1">
  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>


  21. <style type="text/css">
  22. .deng-box {
  23.         position: fixed;
  24.         top: -40px;
  25.         right: -20px;
  26.         z-index: 999;
  27. }

  28. .deng-box1 {
  29.         position: fixed;
  30.         top: -30px;
  31.         right: 10px;
  32.         z-index: 999;
  33. }

  34. .deng-box1 .deng {
  35.         position: relative;
  36.         width: 120px;
  37.         height: 90px;
  38.         margin: 50px;
  39.         background: #d8000f;
  40.         background: rgba(216, 0, 15, 0.8);
  41.         border-radius: 50% 50%;
  42.         -webkit-transform-origin: 50% -100px;
  43.         -webkit-animation: swing 5s infinite ease-in-out;
  44.         box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
  45. }

  46. .deng {
  47.         position: relative;
  48.         width: 120px;
  49.         height: 90px;
  50.         margin: 50px;
  51.         background: #d8000f;
  52.         background: rgba(216, 0, 15, 0.8);
  53.         border-radius: 50% 50%;
  54.         -webkit-transform-origin: 50% -100px;
  55.         -webkit-animation: swing 3s infinite ease-in-out;
  56.         box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
  57. }

  58. .deng-a {
  59.         width: 100px;
  60.         height: 90px;
  61.         background: #d8000f;
  62.         background: rgba(216, 0, 15, 0.1);
  63.         margin: 12px 8px 8px 8px;
  64.         border-radius: 50% 50%;
  65.         border: 2px solid #dc8f03;
  66. }

  67. .deng-b {
  68.         width: 45px;
  69.         height: 90px;
  70.         background: #d8000f;
  71.         background: rgba(216, 0, 15, 0.1);
  72.         margin: -4px 8px 8px 26px;
  73.         border-radius: 50% 50%;
  74.         border: 2px solid #dc8f03;
  75. }

  76. .xian {
  77.         position: absolute;
  78.         top: -20px;
  79.         left: 60px;
  80.         width: 2px;
  81.         height: 20px;
  82.         background: #dc8f03;
  83. }

  84. .shui-a {
  85.         position: relative;
  86.         width: 5px;
  87.         height: 20px;
  88.         margin: -5px 0 0 59px;
  89.         -webkit-animation: swing 4s infinite ease-in-out;
  90.         -webkit-transform-origin: 50% -45px;
  91.         background: #ffa500;
  92.         border-radius: 0 0 5px 5px;
  93. }

  94. .shui-b {
  95.         position: absolute;
  96.         top: 14px;
  97.         left: -2px;
  98.         width: 10px;
  99.         height: 10px;
  100.         background: #dc8f03;
  101.         border-radius: 50%;
  102. }

  103. .shui-c {
  104.         position: absolute;
  105.         top: 18px;
  106.         left: -2px;
  107.         width: 10px;
  108.         height: 35px;
  109.         background: #ffa500;
  110.         border-radius: 0 0 0 5px;
  111. }

  112. .deng:before {
  113.         position: absolute;
  114.         top: -7px;
  115.         left: 29px;
  116.         height: 12px;
  117.         width: 60px;
  118.         content: " ";
  119.         display: block;
  120.         z-index: 999;
  121.         border-radius: 5px 5px 0 0;
  122.         border: solid 1px #dc8f03;
  123.         background: #ffa500;
  124.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  125. }

  126. .deng:after {
  127.         position: absolute;
  128.         bottom: -7px;
  129.         left: 10px;
  130.         height: 12px;
  131.         width: 60px;
  132.         content: " ";
  133.         display: block;
  134.         margin-left: 20px;
  135.         border-radius: 0 0 5px 5px;
  136.         border: solid 1px #dc8f03;
  137.         background: #ffa500;
  138.         background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
  139. }

  140. .deng-t {
  141.         font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
  142.         font-size: 3.2rem;
  143.         color: #dc8f03;
  144.         font-weight: bold;
  145.         line-height: 85px;
  146.         text-align: center;
  147. }

  148. .night .deng-t,
  149. .night .deng-box,
  150. .night .deng-box1 {
  151.         background: transparent !important;
  152. }

  153. @-moz-keyframes swing {
  154.         0% {
  155.                 -moz-transform: rotate(-10deg)
  156.         }

  157.         50% {
  158.                 -moz-transform: rotate(10deg)
  159.         }

  160.         100% {
  161.                 -moz-transform: rotate(-10deg)
  162.         }
  163. }

  164. @-webkit-keyframes swing {
  165.         0% {
  166.                 -webkit-transform: rotate(-10deg)
  167.         }

  168.         50% {
  169.                 -webkit-transform: rotate(10deg)
  170.         }

  171.         100% {
  172.                 -webkit-transform: rotate(-10deg)
  173.         }
  174. }
  175. </style>
复制代码


您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表

在线客服

售前咨询
售后咨询
服务热线
023-58418553
微信公众号