1未命名0
注册登录

网页装饰代码之给您的网站添加添加四个新年快乐灯笼特效

admin
🌐 经济型：买域名、轻量云服务器、用途：游戏 网站等 《腾讯云》特点：特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型：买域名、轻量云服务器、用途：游戏 网站等 《阿里云》特点：中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型：买域名、轻量云服务器、用途：游戏 网站等 《西部数码》 特点：比上两家略贵但是稳定性超好事也少 点我优惠购买

1.jpg

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

  1.     <!--灯笼开始 -->

  2. <div class="deng-box2">


  4.     <div class="deng">


  6.         <div class="xian">


  8.         </div>


  10.         <div class="deng-a">


  12.             <div class="deng-b">


  14.                 <div class="deng-t">年</div>


  16.             </div>


  18.         </div>


  20.         <div class="shui shui-a">


  22.             <div class="shui-c">


  24.             </div>


  26.             <div class="shui-b"></div>


  28.         </div>


  30.     </div>


  32. </div>


  34. <div class="deng-box3">


  36.     <div class="deng">


  38.         <div class="xian">


  40.         </div>


  42.         <div class="deng-a">


  44.             <div class="deng-b">


  46.                 <div class="deng-t">新</div>


  48.             </div>


  50.         </div>


  52.         <div class="shui shui-a">


  54.             <div class="shui-c"></div>


  56.             <div class="shui-b">


  58.             </div>


  60.         </div>


  62.     </div>


  64. </div>


  66. <div class="deng-box1">


  68.     <div class="deng">


  70.         <div class="xian">


  72.         </div>


  74.         <div class="deng-a">


  76.             <div class="deng-b">


  78.                 <div class="deng-t">乐</div>


  80.             </div>


  82.         </div>


  84.         <div class="shui shui-a">


  86.             <div class="shui-c"></div>


  88.             <div class="shui-b"></div>


  90.         </div>


  92.     </div>


  94. </div>


  96. <div class="deng-box">


  98.     <div class="deng">


  100.         <div class="xian">


  102.         </div>


  104.         <div class="deng-a">


  106.             <div class="deng-b">


  108.                 <div class="deng-t">快</div>


  110.             </div>


  112.         </div>


  114.         <div class="shui shui-a">


  116.             <div class="shui-c">


  118.             </div>


  120.             <div class="shui-b"></div>


  122.         </div>


  124.     </div>


  126. </div>


  128. <style type="text/css">


  130.     .deng-box {


  132.         position: fixed;


  134.         top: -40px;


  136.         right: 150px;


  138.         z-index: 9999;


  140.         pointer-events: none;


  142.     }


  144.     .deng-box1 {


  146.         position: fixed;


  148.         top: -30px;


  150.         right: 10px;


  152.         z-index: 9999;


  154.         pointer-events: none


  156.     }


  158.     .deng-box2 {


  160.         position: fixed;


  162.         top: -40px;


  164.         left: 150px;


  166.         z-index: 9999;


  168.         pointer-events: none


  170.     }


  172.     .deng-box3 {


  174.         position: fixed;


  176.         top: -30px;


  178.         left: 10px;


  180.         z-index: 9999;


  182.         pointer-events: none


  184.     }


  186.     .deng-box1 .deng,


  188.     .deng-box3 .deng {


  190.         position: relative;


  192.         width: 120px;


  194.         height: 90px;


  196.         margin: 50px;


  198.         background: #d8000f;


  200.         background: rgba(216, 0, 15, .8);


  202.         border-radius: 50% 50%;


  204.         -webkit-transform-origin: 50% -100px;


  206.         -webkit-animation: swing 5s infinite ease-in-out;


  208.         box-shadow: -5px 5px 30px 4px #fc903D


  210.     }


  212.     .deng {


  214.         position: relative;


  216.         width: 120px;


  218.         height: 90px;


  220.         margin: 50px;


  222.         background: #d8000f;


  224.         background: rgba(216, 0, 15, .8);


  226.         border-radius: 50% 50%;


  228.         -webkit-transform-origin: 50% -100px;


  230.         -webkit-animation: swing 3s infinite ease-in-out;


  232.         box-shadow: -5px 5px 50px 4px #fa6c00


  234.     }


  236.     .deng-a {


  238.         width: 100px;


  240.         height: 90px;


  242.         background: #d8000f;


  244.         background: rgba(216, 0, 15, .1);


  246.         margin: 12px 8px 8px 8px;


  248.         border-radius: 50% 50%;


  250.         border: 2px solid #dc8f03


  252.     }


  254.     .deng-b {


  256.         width: 45px;


  258.         height: 90px;


  260.         background: #d8000f;


  262.         background: rgba(216, 0, 15, .1);


  264.         margin: -4px 8px 8px 26px;


  266.         border-radius: 50% 50%;


  268.         border: 2px solid #dc8f03


  270.     }


  272.     .xian {


  274.         position: absolute;


  276.         top: -20px;


  278.         left: 60px;


  280.         width: 2px;


  282.         height: 20px;


  284.         background: #dc8f03


  286.     }


  288.     .shui-a {


  290.         position: relative;


  292.         width: 5px;


  294.         height: 20px;


  296.         margin: -5px 0 0 59px;


  298.         -webkit-animation: swing 4s infinite ease-in-out;


  300.         -webkit-transform-origin: 50% -45px;


  302.         background: orange;


  304.         border-radius: 0 0 5px 5px


  306.     }


  308.     .shui-b {


  310.         position: absolute;


  312.         top: 14px;


  314.         left: -2px;


  316.         width: 10px;


  318.         height: 10px;


  320.         background: #dc8f03;


  322.         border-radius: 50%


  324.     }


  326.     .shui-c {


  328.         position: absolute;


  330.         top: 18px;


  332.         left: -2px;


  334.         width: 10px;


  336.         height: 35px;


  338.         background: orange;


  340.         border-radius: 0 0 0 5px


  342.     }


  344.     .deng:before {


  346.         position: absolute;


  348.         top: -7px;


  350.         left: 29px;


  352.         height: 12px;


  354.         width: 60px;


  356.         content: " ";


  358.         display: block;


  360.         z-index: 999;


  362.         border-radius: 5px 5px 0 0;


  364.         border: solid 1px #dc8f03;


  366.         background: orange;


  368.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)


  370.     }


  372.     .deng:after {


  374.         position: absolute;


  376.         bottom: -7px;


  378.         left: 10px;


  380.         height: 12px;


  382.         width: 60px;


  384.         content: " ";


  386.         display: block;


  388.         margin-left: 20px;


  390.         border-radius: 0 0 5px 5px;


  392.         border: solid 1px #dc8f03;


  394.         background: orange;


  396.         background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03)


  398.     }


  400.     .deng-t {


  402.         font-family: 黑体, Arial, Lucida Grande, Tahoma, sans-serif;


  404.         font-size: 3.2rem;


  406.         color: #dc8f03;


  408.         font-weight: 700;


  410.         line-height: 85px;


  412.         text-align: center


  414.     }


  416.     .night .deng-box,


  418.     .night .deng-box1,


  420.     .night .deng-t {


  422.         background: 0 0 !important


  424.     }


  426.     @-moz-keyframes swing {


  428.         0% {


  430.             -moz-transform: rotate(-10deg)


  432.         }


  434.         50% {


  436.             -moz-transform: rotate(10deg)


  438.         }


  440.         100% {


  442.             -moz-transform: rotate(-10deg)


  444.         }


  446.     }


  448.     @-webkit-keyframes swing {


  450.         0% {


  452.             -webkit-transform: rotate(-10deg)


  454.         }


  456.         50% {


  458.             -webkit-transform: rotate(10deg)


  460.         }


  462.         100% {


  464.             -webkit-transform: rotate(-10deg)


  466.         }


  468.     }


  470. </style>

  471. <!--灯笼结束 -->




文章版权声明：除非注明，否则均为执刀人的工具库原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

  • 网页装饰代码之给您的网站添加添加四个新年快乐灯笼特效
  • 一个简单的在线要饭打赏系统
  • 2025新唯美社区StarFree源码
  • DedeBIZ资源系统源码 高仿XDGAME模板源码主程序+模板
  • B站视频下载器 Bili23-Downloader v1.55.0 新春版支持自动高音画质
  • 易语言大成皮肤美化模块
  • 《赛博朋克2077》v2.21中文版
  • 【天龙八部3D-7职业防官版】站长典藏版经典金庸武侠怀旧手游

    • 发表评论

    快捷回复： 表情：
    AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
    验证码
    评论列表 （暂无评论，5人围观）

    还没有评论，来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码