最新公告
  • 欢迎您光临闲鱼网,本站秉承服务宗旨 履行“站长”责任,做国内最专业的站长资源平台!立即加入我们
  • 给wordpress挂红灯笼过教程,年啦,挂灯笼!

    给wordpress挂红灯笼过教程,年啦,挂灯笼!

    正文概述 闲鱼网   2020-01-20   1.33K

    过年挂灯笼是中国的一个习俗,家里挂灯笼,自己博客也是自己的家,当然也要挂一个了。很多年前Flash流行时,网上可以随便找一个Flash动画的灯笼,很方便就可以加到网站主题模板上,如今Flash已成过眼云烟,在国内甚至已变成流氓插件,网上找了找没有合适CSS3动画灯笼,那就自己写一个吧,具体效果看本站右上角。代码这里也分享一下,有喜欢的朋友拿去用,将灯笼挂在自己的博客上,增加点过年的气氛。

    这个灯笼动画是纯HTML+CSS写的,我手动敲出来的,由于时间短写的不是很严谨,但不影响使用。

    首先,将下面的HTML代码添加到主题页脚模板footer.php,</body>标签的上面。

    <!-- 灯笼 1 -->
    <div class="deng-box">
    <div class="deng">
    <div class="deng-a">
    <div class="deng-b"><div class="deng-t">春</div></div>
    </div>
    <div class="shui shui-a"></div>
    <div class="shui shui-b"></div>
    <div class="shui shui-c"></div>
    </div>
    </div>
    <!-- 灯笼 2 -->
    <div class="deng-box1">
    <div class="deng">
    <div class="deng-a">
    <div class="deng-b"><div class="deng-t">春</div></div>
    </div>
    <div class="shui shui-a"></div>
    <div class="shui shui-b"></div>
    <div class="shui shui-c"></div>
    </div>
    </div>

    因为代码中有中文,编辑后需要将模板文件保存为UTF-8 无BOM(无签名)的格式,后台主题编辑中修改可以忽略,上面的代码可以只加一个,个人感觉挂两个更灵动些。

    如果只想在首页显示灯笼,可以用下面的判断把HTML代码包裹起来:

    <?php if (is_home()) { ?> <!-- 代码放这里 --> <?php } ?> 
    
    

    其次,将样式代码添加到WP后台 → 外观 → 自定义 → 额外CSS 中,点击“发布”即可。

    .deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 999;
    }
     
    .deng-box1 {
    position: fixed;
    top: -30px;
    right: 10px;
    z-index: 999;
    }
     
    .deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
    }
     
    .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.9);
    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.2);
    margin: 12px 8px 8px 8px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
    }
     
    .deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.2);
    margin: -4px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
    }
     
    .shui {
    width: 5px;
    height: 40px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
    }
     
    .shui-a {
    margin: -10px 0 0 40px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -20px;
    }
     
    .shui-b {
    margin: -35px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    }
     
    .shui-c {
    margin: -45px 0 0 77px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -25px;
    }
     
    .deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    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: " ";
    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.css的最后。

     

    这里也提前预祝大家春节快乐,万事如意,鼠年吉祥!

    过年啦,挂灯笼!

     

     

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!

    闲鱼网 » 给wordpress挂红灯笼过教程,年啦,挂灯笼!

    常见问题FAQ

    本站解压密码说明
    本站解压密码如下(不要复制序号): ①评论刷新后可见解压密码 ②压缩包解压密码 www.xyoq.com
    提示下载完但解压或打开不了?
    清理下浏览器缓存重新下载,若排除这种情况,可在对应资源底部留言,或 联络我们。
    链接地址失效怎么办?
    请带上资源链接地址联系客服,工作时间内我们看到后将第一时间回复。

    8 评论

      1. 速度按时

    1. 闲鱼网测试

      1. 测试正常

    发表评论

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务!!!
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间周一至周日(法定节假日除外) 9:00-24:00
      免责声明本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 888@xyoq.com),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款资源有疑问,可以跟我联系哦!

    联系作者
    • 3764会员总数(位)
    • 5123资源总数(个)
    • 7本周发布(个)
    • 0 今日发布(个)
    • 2289稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    不许偷看