当前位置:首页 > 未分类 > 正文内容

欢度新春动态灯笼html源码——给博客加点年味

admin6个月前 (02-11)未分类115

给博客加点年味

<style>
.ct2 .mn {width:770px;}
.ct2 .sd {width:218px;}
</style>
<div id="wp" class="wp">
    <div class="xnkl">
<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>
<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-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-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>        
</div>
<style type="text/css">
@media screen and (max-width: 768px) {

.xnkl{

display:none; }

}
.deng-box {
        position: fixed;
        top: -40px;
        right: 150px;
        z-index: 9999;
        pointer-events: none;
}

.deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        z-index: 9999;
        pointer-events: none
}

.deng-box2 {
        position: fixed;
        top: -40px;
        left: 150px;
        z-index: 9999;
        pointer-events: none
}

.deng-box3 {
        position: fixed;
        top: -30px;
        left: 10px;
        z-index: 9999;
        pointer-events: none
}

.deng-box1 .deng,.deng-box3 .deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216,0,15,.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 5s infinite ease-in-out;
        box-shadow: -5px 5px 30px 4px #fc903d
}

.deng {
        position: relative;
        width: 120px;
        height: 90px;
        margin: 50px;
        background: #d8000f;
        background: rgba(216,0,15,.8);
        border-radius: 50% 50%;
        -webkit-transform-origin: 50% -100px;
        -webkit-animation: swing 3s infinite ease-in-out;
        box-shadow: -5px 5px 50px 4px #fa6c00
}

.deng-a {
        width: 100px;
        height: 90px;
        background: #d8000f;
        background: rgba(216,0,15,.1);
        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,.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: orange;
        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: orange;
        border-radius: 0 0 0 5px
}

.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: orange;
        background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#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: orange;
        background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#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
}

.night .deng-box,.night .deng-box1,.night .deng-t {
        background: 0 0!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>


放在<body>........</body>内,或者

欢度新春动态灯笼html源码——给博客加点年味 建站交流 瞎扒瞎闹  第1张

插入到页头就行了

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

版权声明:本文由勤奋的思远发布,如需转载请注明出处。

如果文章对你有帮助的话就赞助一下吧https://lsybk.xyz/post/75.html

本文链接:https://lsybk.xyz/post/159.html

分享给朋友:
返回列表

上一篇:2020足迹

下一篇:新春快乐!!

相关文章

网站时间的那些事【转载】

网站时间的那些事【转载】

域名查询时间我们需要知道,在网络中,两个...

勤奋的思远网盘

勤奋的思远网盘

最近有朋友向我提出了建议,可道云网盘不好...

论攻防世界CTF题目(4)

论攻防世界CTF题目(4)

这一次只讲web的一题题目这种题就适合b...

新春快乐!!

新春快乐!!

请允许我用24种编程语言,向你们送新年祝...

论攻防世界CTF题目(2)

论攻防世界CTF题目(2)

可以加入我们的博客战队,名字叫思远网安训...

发表评论

访客

看不清,换一张

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