当前位置:首页 > 未分类 > 欢度新春动态灯笼html源码——给博客加点年味

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

admin9个月前 (02-11)未分类150

给博客加点年味

<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

    分享给朋友:

    相关文章

    【C++入门教程(2)】第一个C++程序

    【C++入门教程(2)】第一个C++程序

    上一次我们讲了如何安装Dev编译器,那这次我们就来开始正课第一个C++程序 Hello World我们先来看看程序#include<iostream>//头文件  using&...

    几个给服务器的上传文件的方法

    几个给服务器的上传文件的方法

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

    为什么朋友说加了cdn不仅没变快反而慢了

    为什么朋友说加了cdn不仅没变快反而慢了

    朋友之前跟我诉苦为什么他的站加了彩虹云cdn不仅没快反而慢了,我也是困惑不已,直到今天...了解一下cdn什么是cdn呢?问一下我们可亲可敬的度娘吧好吧,跳转到搜狗了,这里可以看到,它只服务于静态网页...

    【C++入门教程(6)】循环结构(2)while

    【C++入门教程(6)】循环结构(2)while

    好久没写这个C++教程了,这次来讲讲while循环顾名思义,也是循环的一种,先看看基础的源码加了注释之后,是不是就有一点明白了这个相当于if+for,简化了代码数量,我们来看看是什么输出结果吧那这样的...

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

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

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

    sqlmap基本注入手法

    sqlmap基本注入手法

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

    发表评论

    访客

    看不清,换一张

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