当前位置：首页 > 大街拾贝 > 正文内容

网站挂灯笼代码，网站灯笼 Css 代码

liuxy4个月前 (01-18)大街拾贝174

   最近又要到一年一度的春节了，很多网站也开始挂上了灯笼，我也趁着这个机会水一篇文章，据我所知这段 代码 好久了，具体出处也无从考证，不过我看网上都是一边灯笼，我觉得不大好看就改了的两边灯笼的版本出来，代码会放在下面，按照自己的需要拿吧。


image.png


版本一：单边居右

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>C

css代码：

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

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

如果被其他图层挡住了，请修改 5，12，111 行 z-index 的值。

.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 1999;
}
 
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 10px;
    z-index: 1999;
}
 
.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;
    animation: swing 5s 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;
    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: -4px 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: " ";
    display: block;
    z-index: 1999;
    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;}
@keyframes swing { 
    0% { transform: rotate(-10deg) } 
    50% { transform: rotate(10deg) } 
    100% { transform: rotate(-10deg) } 
}
 
@-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) }
}

版本二: 两边灯笼

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>
    <!--  右 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>
    <!--  左二  -->
    <div class="deng-box3">
        <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>

css:

.deng-box {
    position: fixed;
    top: -40px;
    right: -20px;
    z-index: 1999;
}
 
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 30px;
    z-index: 1998;
}

.deng-box2 {
    position: fixed;
    top: -40px;
    left: -20px;
    z-index: 1999;
}
 
 .deng-box3 {
    position: fixed;
    top: -30px;
    left: 30px;
    z-index: 1998;
}
 
.deng-box1 .deng,
.deng-box3 .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;
    animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng,
.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 3s infinite ease-in-out;
    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: -4px 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: " ";
    display: block;
    z-index: 1999;
    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，
.night .deng-box2，
.night .deng-box3{    background: transparent !important;}

@keyframes swing { 
    0% { transform: rotate(-10deg) } 
    50% { transform: rotate(10deg) } 
    100% { transform: rotate(-10deg) } 
}
 
@-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) }
}

如果只想在首页显示灯笼，可以用下面的判断语句把上面的代码包裹起来：

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

手机移动端不显示：

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


打赏 支付宝打赏 微信打赏

扫描二维码推送至手机访问。

版权声明：本文由十六大街发布，如需转载请注明出处。

本文链接：http://16dajie.com/shibei/55.html

标签: 代码css
返回列表

上一篇：超酷的 HTML5+CSS3 loading 效果

下一篇：快速设计高逼格的LOGO

“网站挂灯笼代码，网站灯笼 Css 代码” 的相关文章

超酷的 HTML5+CSS3 loading 效果

超酷的 HTML5+CSS3 loading 效果

用 gif 图片来做 loading 的时代已经过去了，它显得太 low 了，而用 HTML5/CSS3 以及 SVG 和 canvas 来做加载动画显得既炫酷又逼格十足。这已经成为一种趋势。这里收集了几十个用 html5 和 css3 实现的 loading 效果，以供学习参考。01. CSS R...

快速设计高逼格的LOGO

快速设计高逼格的LOGO

在我们制作LOGO的时候，经常会看到很多大神的设计稿有很多高精度的辅助线，让整个LOGO显得非常精细（如下图中的LOGO）。而且很多同学在制作LOGO形状的时候经常因为路径线条的画的不流畅，而显得LOGO粗糙廉价。那么今天MICU教大家如何快速绘制高品质的LOGO，利用5分钟高效完成设计稿。新建导入...

Typecho增加打赏功能

Typecho增加打赏功能

增加custom.php新增一个php文件，用于以后新增自定义设置，文件名：custom.php；路径 usr/themes/Joe/public<?php      // 收款设置    &nb...

Typecho 不使用插件实现回复可见

进入 网站目录/usr/themes/主题 找到 post.php 打开步骤一在 post.php 找到 <?php $this->content(); ?> 替换成php 代码:<?php$db...

EMUELEC游戏添加删除工具

EMUELEC游戏添加删除工具

EMUELEC 游戏添加删除工具使用说明1.软件整体情况主要包含EMUELEC系统SSH连接，游戏列表的获取，游戏图片以及视频预览，游戏上传以及下载,目前仅支持网络传输，需要电脑和盒子在同一个局域网内使用,主题功能未开发功能使用步骤第一步：进入emuelec系统查看游戏系统IP地址,并且确保系统已开...

发表评论

访客

看不清，换一张

◎欢迎参与讨论，请在这里发表您的看法和观点。

免责申明 | 隐私政策 | 网站地图 | Sitemap | 游客投稿 | 联系我们

© 2016 - 2024 十六大街  备案号：冀ICP备12010571号-5    冀公网安备13072702000010号

本站所发布的全部内容源于互联网搬运，如果有侵权之处请第一时间联系我们删除。敬请谅解!