当前位置:首页 > 默认文章 > 【代码】欢度新春动态灯笼html源码——给博客加点年味

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

思远2年前 (2021-02-11)默认文章1550

给博客加点年味

<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/donation.html

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

    分享给朋友:

    相关文章

    【记录】密码重置盘研究后续 - 更多细节 & 伪造尝试

    【记录】密码重置盘研究后续 - 更多细节 & 伪造尝试

    密码重置盘研究后续 - 更多细节 & 伪造尝试 密码重置盘研究后续 - 更多细节 & 伪造尝试本文是研究报告“创建密码重置盘的时候,系统都做了些什么”的后续。0. 访问“本地...

    友情赞助

    友情赞助

    寄语:本着学习与记录技术的初心,我在初一时搭建了这个博客,支出负担重。如果您觉得本站的内容对您有所帮助,能打赏一下博主嘛,thanks!一切都是为了能够更好的运营和维护本站,现支持三种赞助方式(QQ,...

    添加游客投稿功能

    添加游客投稿功能

    大家好,网站现在支持游客投稿,大家可以发布一些文章投稿地址:https://lsybk.xyz/?apost_free 文章需要审核,后台通过后即可,谢谢大家投稿的作用:@允许资源分享1.添加友链将更...

    SQL手注时绕waf的十一种方法

    SQL手注时绕waf的十一种方法

    带大家了解一下SQL时过waf的小方法1.大小写绕过这个大家都很熟悉,对于一些太垃圾的WAF效果显著,比如拦截了union,那就使用Union UnIoN等等绕过。2.简单编码绕过比如WAF检测关键字...

    sqlmap基本注入手法

    sqlmap基本注入手法

    先说说SQLmapSqlmap 是一个自动化的 SQL 注入工具,其主要功能是扫描、发现并利用给定的 Url 的 Sql 注入漏洞,目前支持 MySQL、 Oracle、 PostgreSQL、 Mi...

    神奇的burp之注册

    神奇的burp之注册

    这篇文章就来教一下burp的注册与使用burp是什么呢?BurpSuite是一款信息安全从业人员必备的集成型的渗透测试神器,它采用自动测试和半自动测试的方式,包含了Proxy,Spider,Scann...

    发表评论

    访客

    看不清,换一张

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