好看的动态飘花灯笼特效代码可直接将代码复制粘贴到各种页面底部使用！若需要全站可直接将代码复制粘贴到footer.php或footer.html等脚模板底部区域文件使用提示：加显示判断函数，代码必须添加在页脚模板或直接添加到任意的网站底部效果图：代码：<!-- 灯笼节 --> <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 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-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> <style> .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-box1 .deng{position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 5s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);} .deng-box2{position: fixed;top: -30px;right: 50px;z-index: 9999;pointer-events: none;} .deng-box2 .deng{position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 4s infinite ease-in-out;box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);} .deng{position: relative;width: 120px;height: 90px;margin: 50px;background: #d8000f;background: rgba(216, 0, 15, 0.8);border-radius: 50% 50%;-webkit-transform-origin: 50% -100px;-webkit-animation: swing 3s infinite ease-in-out;box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);} .deng-a{width: 100px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: 12px 8px 8px 10px;border-radius: 50% 50%;border: 2px solid #dc8f03;} .deng-b{width: 45px;height: 90px;background: #d8000f;background: rgba(216, 0, 15, 0.1);margin: -2px 8px 8px 26px;border-radius: 50% 50%;border: 2px solid #dc8f03;} .xian{position: absolute;top: -20px;left: 60px;width: 2px;height: 20px;background: #dc8f03;} .shui-a{position: relative;width: 5px;height: 20px;margin: -5px 0 0 59px;-webkit-animation: swing 4s infinite ease-in-out;-webkit-transform-origin: 50% -45px;background: #ffa500;border-radius: 0 0 5px 5px;} .shui-b{position: absolute;top: 14px;left: -2px;width: 10px;height: 10px;background: #dc8f03;border-radius: 50%;} .shui-c{position: absolute;top: 18px;left: -2px;width: 10px;height: 35px;background: #ffa500;border-radius: 0 0 0 5px;} .deng:before{position: absolute;top: -7px;left: 29px;height: 12px;width: 60px;content: &quot;&quot;;display: block;z-index: 999;border-radius: 5px 5px 0 0;border: solid 1px #dc8f03;background: #ffa500;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);} .deng:after{position: absolute;bottom: -7px;left: 10px;height: 12px;width: 60px;content: &quot;&quot;;display: block;margin-left: 20px;border-radius: 0 0 5px 5px;border: solid 1px #dc8f03;background: #ffa500;background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);} .deng-t{font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;font-size: 3.2rem;color: #dc8f03;font-weight: bold;line-height: 85px;text-align: center;} .night .deng-t, .night .deng-box, .night .deng-box1{background: transparent !important;} @-moz-keyframes swing{0%{-moz-transform: rotate(-10deg)} 50%{-moz-transform: rotate(10deg)} 100%{-moz-transform: rotate(-10deg)}} @-webkit-keyframes swing{0%{-webkit-transform: rotate(-10deg)} 50%{-webkit-transform: rotate(10deg)} 100%{-webkit-transform: rotate(-10deg)}} </style>

为你的网站加上Loading等待加载效果吧 | Loading页面加载添加教程效果图 :教程开始新建一个loading样式css将以下代码放进去 然后引用这个文件#Loadanimation{ background-color:#fff; height:100%; width:100%; position:fixed; z-index:1; margin-top:0px;top:0px; } #Loadanimation-center{ width:100%; height:100%; position:relative; } #Loadanimation-center-absolute{ position:absolute; left:50%; top:50%; height:200px; width:200px; margin-top:-100px; margin-left:-100px; } .xccx_object{ -moz-border-radius:50% 50% 50% 50%; -webkit-border-radius:50% 50% 50% 50%; border-radius:50% 50% 50% 50%; position:absolute; border-left:5px solid #87CEFA; border-right:5px solid #FFC0CB; border-top:5px solid transparent; border-bottom:5px solid transparent; -webkit-animation:animate 2.5s infinite; animation:animate 2.5s infinite; } #xccx_one{ left:75px; top:75px; width:50px; height:50px; } #xccx_two{ left:65px; top:65px; width:70px; height:70px; -webkit-animation-delay:0.1s; animation-delay:0.1s; } #xccx_three{ left:55px; top:55px; width:90px; height:90px; -webkit-animation-delay:0.2s;animation-delay:0.2s; } #xccx_four{ left:45px; top:45px; width:110px; height:110px; -webkit-animation-delay:0.3s; animation-delay:0.3s; } @-webkit-keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{-ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } } @keyframes animate{50%{ -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); } 100%{ -ms-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); } }第二步：将以下代码填写入头部文件 一般都为 header.php<div id="Loadanimation" style="z-index:999999;"> <div id="Loadanimation-center"> <div id="Loadanimation-center-absolute"> <div class="xccx_object" id="xccx_four"></div> <div class="xccx_object" id="xccx_three"></div> <div class="xccx_object" id="xccx_two"></div> <div class="xccx_object" id="xccx_one"></div> </div> </div> </div> <script> $(function(){ $("#Loadanimation").fadeOut(540); }); </script>注意 注意 fadeOut 里面填写的是毫秒数 本loading可以自定义 网上也有很多css的 只要替换第二步的代码都可以成功(JS代码别替换)

使用方法：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时-军少博客网-4dn.net</title> </head> <body> <?php $tiem='1603769505'?><?php //$tiem 结束时间 减 time() 当前时间?> <div class="box" end-time="<?php echo $tiem?>" start-time="<?php echo time()?>"> 距离活动结束还有<span id="time"></span> </div> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script> //不足两位补0 function timeS(num){ return ('0'+num).slice(-2); } function FreshTime(){ //这两个是后台返回的时间戳，为了便于测试把开始时间变成当前本地的时间 var attr_s = $('.box').attr('start-time'); var attr_e = $('.box').attr('end-time'); var startTime = new Date().getTime(); var endTime = parseInt(attr_e*1000); var differTime = endTime - startTime; //两时间差 var d = parseInt(differTime/(24*60*60*1000)); var h = parseInt(differTime/(60*60*1000)%24); var m = parseInt(differTime/(60*1000)%60); var s = parseInt(differTime/1000%60); var t_html = d+"天"+timeS(h)+"时"+timeS(m)+"分"+timeS(s)+"秒"; $("#time").html(t_html); if(differTime<=0){ $("#time").html('团购已结束'); clearInterval(timer); } } FreshTime(); var timer = setInterval(FreshTime, 1000); </script> </body> </html>