过年啦,发个给wordpress网站加红灯笼的教程

一点优化
一点优化
一点优化
461
文章
40
评论
2020年1月21日22:34:34 评论 580围观 2962字阅读9分52秒

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

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

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

  1. <!-- 灯笼 1 -->
  2. <div class="deng-box">
  3. <div class="deng">
  4. <div class="deng-a">
  5. <div class="deng-b"><div class="deng-t"></div></div>
  6. </div>
  7. <div class="shui shui-a"></div>
  8. <div class="shui shui-b"></div>
  9. <div class="shui shui-c"></div>
  10. </div>
  11. </div>
  12. <!-- 灯笼 2 -->
  13. <div class="deng-box1">
  14. <div class="deng">
  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>
  19. <div class="shui shui-b"></div>
  20. <div class="shui shui-c"></div>
  21. </div>
  22. </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: 700;
line-height: 85px;
text-align: center;
}

也可以将样式代码直接加到主题样式文件style.css的最后。

 

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

  • 微信
  • 这是我的微信扫一扫
  • weinxin
  • QQ群
  • 我的QQ交流群扫一扫
  • weinxin
一点优化
WordPress添加好看的移动端底部菜单导航 wp美化

WordPress添加好看的移动端底部菜单导航

WordPress添加好看的移动端底部菜单导航,以前也分享过一个导航,不过那个不太好看,这里在分享一个导航在电脑端不显示,手机端显示,其它系统程序也可以用,把代码添加到主题的页脚文件就可以啦,CSS样...
利用HTML5预加载实现给wordpress预加载页面 WP综合教程

利用HTML5预加载实现给wordpress预加载页面

HTML5引入了预加载页面技术,可以大幅度提高网站加载时间以及速度,HTML5预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面,资源。 浏览器载入当前页面完成后,...
WordPress网站SEO优化插件:Smart SEO Tool WP插件

WordPress网站SEO优化插件:Smart SEO Tool

一点优化的徒弟找了一款WordPress网站SEO优化插件,这个插件聚合了一个网站所需要的基础功能,只要是做优化的应该没有不喜欢的,这款叫Smart SEO Tool,下面介绍一下这款插件的功能,个人...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: