广告位招租

为博客网站加2个春节快乐灯笼挂件

是不是看过很多博客网有两个灯笼感觉到奇怪,怎么做到的。这节小篇就来教教大家。加2个CSS写的灯笼,这里改了一下,放在两边,字体加缩小了能放下两个字,还有灯笼线,还有手机端不显示。

为博客网站加2个春节快乐灯笼挂件插图

把html代码放到主题页脚文件(footer.php),</body>前面,然后到CSS样式代码放在后台外观,自定义里的额外CSS里面,begin主题的话可直接放在主题选项里的定制样式的css里即可。

HTML代码如下:

<!-- 灯笼 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>        <div class="shui shui-b"></div>        <div class="shui shui-c"></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>        <div class="shui shui-b"></div>        <div class="shui shui-c"></div>    </div></div>

CSS代码如下:

.xian {    position: absolute;    top: -20px;    left: 60px;    width: 2px;    height: 20px;    background: #dc8f03;}.deng-box {    position: fixed;    top: -30px;    z-index: 999;}.deng-box1 {    position: fixed;    top: -30px;    rightright: 0px;    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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}.deng:after {    position: absolute;    bottombottom: -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 rightright, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);}.deng-t {    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;    font-size: 1.8rem;    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)    }}
0
分享到:

 1. 本站实行充值兑换金币,1元=1金币,每日签到可领取1个金币,[我要充值]
 2. 标注免费的资源,登录后即可下载,加入我们VIP会员全站无限下载,[去开通]
 3. 本站正式上线, 推荐到QQ或者微信群免费获得VIP会员资格,详情[点我查看]
 4. 如果您找不到合适的资源,请联系我们,告知您的需求,我们会尽快整理发布。

没有账号? 忘记密码?
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡