设为首页收藏本站
查看: 3007|回复: 0

[前端开发] 博客加上新年快乐灯笼源码下载

[复制链接]
  • TA的每日心情
    开心
    2022-3-3 14:18
  • 签到天数: 155 天

    [LV.7]常住居民III

    发表于 2022-1-24 21:06:24 | 显示全部楼层 |阅读模式
    博客加上新年快乐灯笼源码下载(新年快乐灯笼源码禁止手机端显示代码)



    1. <div class="xnkl">
    2. <div class="deng-box2">
    3.   <div class="deng">
    4.     <div class="xian"></div>
    5.     <div class="deng-a">
    6.       <div class="deng-b"><div class="deng-t">年</div></div>
    7.     </div>
    8.     <div class="shui shui-a">
    9.       <div class="shui-c"></div>
    10.       <div class="shui-b"></div>
    11.     </div>
    12.   </div>
    13. </div>
    14. <div class="deng-box3">
    15.   <div class="deng">
    16.     <div class="xian"></div>
    17.     <div class="deng-a">
    18.       <div class="deng-b"><div class="deng-t">新</div></div>
    19.     </div>
    20.     <div class="shui shui-a">
    21.       <div class="shui-c"></div>
    22.       <div class="shui-b"></div>
    23.     </div>
    24.   </div>
    25. </div>
    26. <div class="deng-box1">
    27.   <div class="deng">
    28.     <div class="xian"></div>
    29.     <div class="deng-a">
    30.       <div class="deng-b"><div class="deng-t">乐</div></div>
    31.     </div>
    32.     <div class="shui shui-a">
    33.       <div class="shui-c"></div>
    34.       <div class="shui-b"></div>
    35.     </div>
    36.   </div>
    37. </div>
    38. <div class="deng-box">
    39.   <div class="deng">
    40.     <div class="xian"></div>
    41.     <div class="deng-a">
    42.       <div class="deng-b"><div class="deng-t">快</div></div>
    43.     </div>
    44.     <div class="shui shui-a">
    45.       <div class="shui-c"></div>
    46.       <div class="shui-b"></div>
    47.     </div>
    48.   </div>
    49. </div>        
    50. </div>
    51. <style type="text/css">
    52. @media screen and (max-width: 768px) {

    53. .xnkl{

    54. display:none; }

    55. }
    56. .deng-box {
    57.         position: fixed;
    58.         top: -40px;
    59.         right: 150px;
    60.         z-index: 9999;
    61.         pointer-events: none;
    62. }

    63. .deng-box1 {
    64.         position: fixed;
    65.         top: -30px;
    66.         right: 10px;
    67.         z-index: 9999;
    68.         pointer-events: none
    69. }

    70. .deng-box2 {
    71.         position: fixed;
    72.         top: -40px;
    73.         left: 150px;
    74.         z-index: 9999;
    75.         pointer-events: none
    76. }

    77. .deng-box3 {
    78.         position: fixed;
    79.         top: -30px;
    80.         left: 10px;
    81.         z-index: 9999;
    82.         pointer-events: none
    83. }

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

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

    108. .deng-a {
    109.         width: 100px;
    110.         height: 90px;
    111.         background: #d8000f;
    112.         background: rgba(216,0,15,.1);
    113.         margin: 12px 8px 8px 8px;
    114.         border-radius: 50% 50%;
    115.         border: 2px solid #dc8f03
    116. }

    117. .deng-b {
    118.         width: 45px;
    119.         height: 90px;
    120.         background: #d8000f;
    121.         background: rgba(216,0,15,.1);
    122.         margin: -4px 8px 8px 26px;
    123.         border-radius: 50% 50%;
    124.         border: 2px solid #dc8f03
    125. }

    126. .xian {
    127.         position: absolute;
    128.         top: -20px;
    129.         left: 60px;
    130.         width: 2px;
    131.         height: 20px;
    132.         background: #dc8f03
    133. }

    134. .shui-a {
    135.         position: relative;
    136.         width: 5px;
    137.         height: 20px;
    138.         margin: -5px 0 0 59px;
    139.         -webkit-animation: swing 4s infinite ease-in-out;
    140.         -webkit-transform-origin: 50% -45px;
    141.         background: orange;
    142.         border-radius: 0 0 5px 5px
    143. }

    144. .shui-b {
    145.         position: absolute;
    146.         top: 14px;
    147.         left: -2px;
    148.         width: 10px;
    149.         height: 10px;
    150.         background: #dc8f03;
    151.         border-radius: 50%
    152. }

    153. .shui-c {
    154.         position: absolute;
    155.         top: 18px;
    156.         left: -2px;
    157.         width: 10px;
    158.         height: 35px;
    159.         background: orange;
    160.         border-radius: 0 0 0 5px
    161. }

    162. .deng:before {
    163.         position: absolute;
    164.         top: -7px;
    165.         left: 29px;
    166.         height: 12px;
    167.         width: 60px;
    168.         content: " ";
    169.         display: block;
    170.         z-index: 999;
    171.         border-radius: 5px 5px 0 0;
    172.         border: solid 1px #dc8f03;
    173.         background: orange;
    174.         background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
    175. }

    176. .deng:after {
    177.         position: absolute;
    178.         bottom: -7px;
    179.         left: 10px;
    180.         height: 12px;
    181.         width: 60px;
    182.         content: " ";
    183.         display: block;
    184.         margin-left: 20px;
    185.         border-radius: 0 0 5px 5px;
    186.         border: solid 1px #dc8f03;
    187.         background: orange;
    188.         background: linear-gradient(to right,#dc8f03,orange,#dc8f03,orange,#dc8f03)
    189. }

    190. .deng-t {
    191.         font-family: 黑体,Arial,Lucida Grande,Tahoma,sans-serif;
    192.         font-size: 3.2rem;
    193.         color: #dc8f03;
    194.         font-weight: 700;
    195.         line-height: 85px;
    196.         text-align: center
    197. }

    198. .night .deng-box,.night .deng-box1,.night .deng-t {
    199.         background: 0 0!important
    200. }

    201. @-moz-keyframes swing {
    202.         0% {
    203.                 -moz-transform: rotate(-10deg)
    204.         }

    205.         50% {
    206.                 -moz-transform: rotate(10deg)
    207.         }

    208.         100% {
    209.                 -moz-transform: rotate(-10deg)
    210.         }
    211. }

    212. @-webkit-keyframes swing {
    213.         0% {
    214.                 -webkit-transform: rotate(-10deg)
    215.         }

    216.         50% {
    217.                 -webkit-transform: rotate(10deg)
    218.         }

    219.         100% {
    220.                 -webkit-transform: rotate(-10deg)
    221.         }
    222. }</style>
    复制代码
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.060686 second(s), 21 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号:冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表