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

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

思远1年前 (2021-02-11)默认文章1540

给博客加点年味

<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>内,或者

插入到页头就行了

     您阅读本篇文章共花了: 

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

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

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

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

    分享给朋友:

    相关文章

    友情链接-My Friends

    友情链接-My Friends

    全站链接(附在侧边栏及下方) 梦之国  杜老师说 wpbkj博客  叶开楗博客  AMENG 青柠博客 大白熊博客  土土博客 黄衣哥的惊人博客 青阳...

    【教程】文件夹变成可执行程序怎么办

    【教程】文件夹变成可执行程序怎么办

    前几天我的U盘拷了几个程序,拿回家时发现,文件夹隐藏了(我有开不隐藏文件的习惯),冒出来很多同名可执行文件仔细一看,exe文件只有十几kb,应该是相当于一种快捷方式,而且咋删都会有(其实是一种文件夹病...

    【教程】赞助平台的建成步骤

    【教程】赞助平台的建成步骤

    前言大家看到这篇文章的人应该都知道,现在上线了这个赞助平台,简称“要饭网”那这个是如何建成的呢?幸好作业不多,我弄了一晚上其实之前搞过一个,但是跟这个版本不一样,用的是爱支付接口,玩了一下,手续费太多...

    【教程】几个给服务器的上传文件的方法

    【教程】几个给服务器的上传文件的方法

    本文章阅读量较大前言这篇文章我耗资有点多。。不过没关系的哈,你们看懂就好,为新手答疑解惑哈(重新搭了个环境。。)我把我即将到期的阿里云给续费了。。linux系统(centos7等)FTP(File T...

    【教程】bilibili视频下载方法

    【教程】bilibili视频下载方法

    今天脑抽了,想看看关于历史的视频于是.....上B站!!https://www.bilibili.com/video/BV1zW411j7r6 还不错,那看看咋下载。。。搜了一大堆,最后找到这两个网站...

    sqlmap各项参数介绍

    sqlmap各项参数介绍

    教程说明学习sqlmap前,建议了解SQL注入实现原理与基本的手工注入操作,更易于理解sqlmap的使用。我的另一个笔记整理:可能是网上最易懂的SQL手工注入教程【个人笔记精华整理】针对sqlmap注...

    发表评论

    访客

    看不清,换一张

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