给你的网站添加灯笼特效,让站有点年味

  • 大小
    1kb
  • 格式
    zip

看到群里有兄弟发CSS过年灯笼的教程,我就把我在7B2群里有分享的老哥给的文件和教程发一下吧

第一步、添加HTML代码

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

<!-- 灯笼1 -->
<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>
 
<!-- 灯笼2 -->
<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>


2、复制下面的css代码添加到你网站上面。

放在下载文件里了

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

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

也可以将样式代码直接加到主题样式文件 style.css 的最后。可能灯笼上的文字字号在有些主题上有点大,可以适当修改第 133 行的字号:

font-size: 3.2rem;
如果只想在首页显示灯笼,可以用下面的判断语句把上面的代码包裹起来: 
代码在手机上显示效果不是很好,如果不想在手机上显示可以在自定义代码添加: 
@media screen and (max-width: 550px) { .deng { display: none; } deng-box { display: none; } .deng-box1 { display: none; } } 
添加梅花背景 将下面的 HTML 代码添加到主题页脚模板 footer.php,灯笼代码的
上面添加 CSS 将样式代码添加到 WP 后台 → 外观 → 自定义 → 额外 CSS 中,
点击“发布”即可 /** 梅花树 **/ .meiha { position: fixed; top: 0; right: 0; z-index: 999; width: 350px;/** PNG 图宽度 **/ height: 231px;/** PNG 
图高度 **/ pointer-events: none; background: url('https://s2.ax1x.com/2020/01/21/1kBpid.png'); } 如果只想显示在
首页,可以用下面的判断语句把上面的代码包裹起来:

下载权限

查看
  • 免费下载
    评论并刷新后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 支付以后下载 请先登录登录 评论后刷新页面下载评论 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限

人已赞赏

相关文章

WordPress-plugin

wordpress利用Memcached加载速度优化

2021-2-3 20:06:53

WordPress-plugin

WP-China-Yes插件:将你的WordPress接入本土生态体系中

2021-2-13 9:42:13

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索