网页装饰代码之给您的网站添加添加四个新年快乐灯笼特效
2025-02-08 194 资源分享

直接把下面的代码，粘贴到您网站</body>标签前面

  1.     <!--灯笼开始 -->
  2. <div class="deng-box2">
  3.  
  4.     <div class="deng">
  5.  
  6.         <div class="xian">
  7.  
  8.         </div>
  9.  
  10.         <div class="deng-a">
  11.  
  12.             <div class="deng-b">
  13.  
  14.                 <div class="deng-t">年</div>
  15.  
  16.             </div>
  17.  
  18.         </div>
  19.  
  20.         <div class="shui shui-a">
  21.  
  22.             <div class="shui-c">
  23.  
  24.             </div>
  25.  
  26.             <div class="shui-b"></div>
  27.  
  28.         </div>
  29.  
  30.     </div>
  31.  
  32. </div>
  33.  
  34. <div class="deng-box3">
  35.  
  36.     <div class="deng">
  37.  
  38.         <div class="xian">
  39.  
  40.         </div>
  41.  
  42.         <div class="deng-a">
  43.  
  44.             <div class="deng-b">
  45.  
  46.                 <div class="deng-t">新</div>
  47.  
  48.             </div>
  49.  
  50.         </div>
  51.  
  52.         <div class="shui shui-a">
  53.  
  54.             <div class="shui-c"></div>
  55.  
  56.             <div class="shui-b">
  57.  
  58.             </div>
  59.  
  60.         </div>
  61.  
  62.     </div>
  63.  
  64. </div>
  65.  
  66. <div class="deng-box1">
  67.  
  68.     <div class="deng">
  69.  
  70.         <div class="xian">
  71.  
  72.         </div>
  73.  
  74.         <div class="deng-a">
  75.  
  76.             <div class="deng-b">
  77.  
  78.                 <div class="deng-t">乐</div>
  79.  
  80.             </div>
  81.  
  82.         </div>
  83.  
  84.         <div class="shui shui-a">
  85.  
  86.             <div class="shui-c"></div>
  87.  
  88.             <div class="shui-b"></div>
  89.  
  90.         </div>
  91.  
  92.     </div>
  93.  
  94. </div>
  95.  
  96. <div class="deng-box">
  97.  
  98.     <div class="deng">
  99.  
  100.         <div class="xian">
  101.  
  102.         </div>
  103.  
  104.         <div class="deng-a">
  105.  
  106.             <div class="deng-b">
  107.  
  108.                 <div class="deng-t">快</div>
  109.  
  110.             </div>
  111.  
  112.         </div>
  113.  
  114.         <div class="shui shui-a">
  115.  
  116.             <div class="shui-c">
  117.  
  118.             </div>
  119.  
  120.             <div class="shui-b"></div>
  121.  
  122.         </div>
  123.  
  124.     </div>
  125.  
  126. </div>
  127.  
  128. <style type="text/css">
  129.  
  130.     .deng-box {
  131.  
  132.         position: fixed;
  133.  
  134.         top: -40px;
  135.  
  136.         right: 150px;
  137.  
  138.         z-index: 9999;
  139.  
  140.         pointer-events: none;
  141.  
  142.     }
  143.  
  144.     .deng-box1 {
  145.  
  146.         position: fixed;
  147.  
  148.         top: -30px;
  149.  
  150.         right: 10px;
  151.  
  152.         z-index: 9999;
  153.  
  154.         pointer-events: none
  155.  
  156.     }
  157.  
  158.     .deng-box2 {
  159.  
  160.         position: fixed;
  161.  
  162.         top: -40px;
  163.  
  164.         left: 150px;
  165.  
  166.         z-index: 9999;
  167.  
  168.         pointer-events: none
  169.  
  170.     }
  171.  
  172.     .deng-box3 {
  173.  
  174.         position: fixed;
  175.  
  176.         top: -30px;
  177.  
  178.         left: 10px;
  179.  
  180.         z-index: 9999;
  181.  
  182.         pointer-events: none
  183.  
  184.     }
  185.  
  186.     .deng-box1 .deng,
  187.  
  188.     .deng-box3 .deng {
  189.  
  190.         position: relative;
  191.  
  192.         width: 120px;
  193.  
  194.         height: 90px;
  195.  
  196.         margin: 50px;
  197.  
  198.         background: #d8000f;
  199.  
  200.         background: rgba(216, 0, 15, .8);
  201.  
  202.         border-radius: 50% 50%;
  203.  
  204.         -webkit-transform-origin: 50% -100px;
  205.  
  206.         -webkit-animation: swing 5s infinite ease-in-out;
  207.  
  208.         box-shadow: -5px 5px 30px 4px #fc903d
  209.  
  210.     }
  211.  
  212.     .deng {
  213.  
  214.         position: relative;
  215.  
  216.         width: 120px;
  217.  
  218.         height: 90px;
  219.  
  220.         margin: 50px;
  221.  
  222.         background: #d8000f;
  223.  
  224.         background: rgba(216, 0, 15, .8);
  225.  
  226.         border-radius: 50% 50%;
  227.  
  228.         -webkit-transform-origin: 50% -100px;
  229.  
  230.         -webkit-animation: swing 3s infinite ease-in-out;
  231.  
  232.         box-shadow: -5px 5px 50px 4px #fa6c00
  233.  
  234.     }
  235.  
  236.     .deng-a {
  237.  
  238.         width: 100px;
  239.  
  240.         height: 90px;
  241.  
  242.         background: #d8000f;
  243.  
  244.         background: rgba(216, 0, 15, .1);
  245.  
  246.         margin: 12px 8px 8px 8px;
  247.  
  248.         border-radius: 50% 50%;
  249.  
  250.         border: 2px solid #dc8f03
  251.  
  252.     }
  253.  
  254.     .deng-b {
  255.  
  256.         width: 45px;
  257.  
  258.         height: 90px;
  259.  
  260.         background: #d8000f;
  261.  
  262.         background: rgba(216, 0, 15, .1);
  263.  
  264.         margin: -4px 8px 8px 26px;
  265.  
  266.         border-radius: 50% 50%;
  267.  
  268.         border: 2px solid #dc8f03
  269.  
  270.     }
  271.  
  272.     .xian {
  273.  
  274.         position: absolute;
  275.  
  276.         top: -20px;
  277.  
  278.         left: 60px;
  279.  
  280.         width: 2px;
  281.  
  282.         height: 20px;
  283.  
  284.         background: #dc8f03
  285.  
  286.     }
  287.  
  288.     .shui-a {
  289.  
  290.         position: relative;
  291.  
  292.         width: 5px;
  293.  
  294.         height: 20px;
  295.  
  296.         margin: -5px 0 0 59px;
  297.  
  298.         -webkit-animation: swing 4s infinite ease-in-out;
  299.  
  300.         -webkit-transform-origin: 50% -45px;
  301.  
  302.         background: orange;
  303.  
  304.         border-radius: 0 0 5px 5px
  305.  
  306.     }
  307.  
  308.     .shui-b {
  309.  
  310.         position: absolute;
  311.  
  312.         top: 14px;
  313.  
  314.         left: -2px;
  315.  
  316.         width: 10px;
  317.  
  318.         height: 10px;
  319.  
  320.         background: #dc8f03;
  321.  
  322.         border-radius: 50%
  323.  
  324.     }
  325.  
  326.     .shui-c {
  327.  
  328.         position: absolute;
  329.  
  330.         top: 18px;
  331.  
  332.         left: -2px;
  333.  
  334.         width: 10px;
  335.  
  336.         height: 35px;
  337.  
  338.         background: orange;
  339.  
  340.         border-radius: 0 0 0 5px
  341.  
  342.     }
  343.  
  344.     .deng:before {
  345.  
  346.         position: absolute;
  347.  
  348.         top: -7px;
  349.  
  350.         left: 29px;
  351.  
  352.         height: 12px;
  353.  
  354.         width: 60px;
  355.  
  356.         content: " ";
  357.  
  358.         display: block;
  359.  
  360.         z-index: 999;
  361.  
  362.         border-radius: 5px 5px 0 0;
  363.  
  364.         border: solid 1px #dc8f03;
  365.  
  366.         background: orange;
  367.  
  368.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
  369.  
  370.     }
  371.  
  372.     .deng:after {
  373.  
  374.         position: absolute;
  375.  
  376.         bottom: -7px;
  377.  
  378.         left: 10px;
  379.  
  380.         height: 12px;
  381.  
  382.         width: 60px;
  383.  
  384.         content: " ";
  385.  
  386.         display: block;
  387.  
  388.         margin-left: 20px;
  389.  
  390.         border-radius: 0 0 5px 5px;
  391.  
  392.         border: solid 1px #dc8f03;
  393.  
  394.         background: orange;
  395.  
  396.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)
  397.  
  398.     }
  399.  
  400.     .deng-t {
  401.  
  402.         font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;
  403.  
  404.         font-size: 3.2rem;
  405.  
  406.         color: #dc8f03;
  407.  
  408.         font-weight: 700;
  409.  
  410.         line-height: 85px;
  411.  
  412.         text-align: center
  413.  
  414.     }
  415.  
  416.     .night .deng-box,
  417.  
  418.     .night .deng-box1,
  419.  
  420.     .night .deng-t {
  421.  
  422.         background: 0 0 !important
  423.  
  424.     }
  425.  
  426.     @-moz-keyframes swing {
  427.  
  428.         0% {
  429.  
  430.             -moz-transform: rotate(-10deg)
  431.  
  432.         }
  433.  
  434.         50% {
  435.  
  436.             -moz-transform: rotate(10deg)
  437.  
  438.         }
  439.  
  440.         100% {
  441.  
  442.             -moz-transform: rotate(-10deg)
  443.  
  444.         }
  445.  
  446.     }
  447.  
  448.     @-webkit-keyframes swing {
  449.  
  450.         0% {
  451.  
  452.             -webkit-transform: rotate(-10deg)
  453.  
  454.         }
  455.  
  456.         50% {
  457.  
  458.             -webkit-transform: rotate(10deg)
  459.  
  460.         }
  461.  
  462.         100% {
  463.  
  464.             -webkit-transform: rotate(-10deg)
  465.  
  466.         }
  467.  
  468.     }
  469.  
  470. </style>
  471. <!--灯笼结束 -->