博客主页
新年灯笼

Author:

CC-star

©

Wordage:

共计 6787 字

needs:

约 1 分钟

Popular:

106 ℃

Created:

:本文最后更新于2024年01月23日,已经过了82天没有更新,若内容或图片失效,请留言反馈
目 录

前言

临近春节,这里也提前祝大家新年快乐,下面是我收集的一些适合春节的歌曲,我个人比较喜欢(不是老歌)
👉新年新气象👈

灯笼效果

1706015630386.png

灯笼代码

body部分

        <div class="meihau"></div>
        <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>

css

梅花css

      .meihau {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 999;
        width: 350px;
        * PNG图宽度 *
        height: 231px;
        * PNG图高度 *
        pointer-events: none;
        background: url('http://api.xlyu.cn/meihua.png');
    }

灯笼css

            .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)
        }
    }

以上代码就可以实现给网站加灯笼的效果,但是对于手机这类小屏并不好看,所以可以去掉在手机上显示


去手机显示代码

    
/* 默认样式适用于大屏幕设备 */
.deng-box, .deng-box1, .deng-box2, .deng-box3 {
  display: block;
}

/* 在小屏幕上隐藏元素 */
@media only screen and (max-width: 600px) {
  .deng-box, .deng-box1, .deng-box2, .deng-box3 {
    display: none;
  }
}
作者:
CC-star
文章:
星鹿语
地址:
https://blog.xlyu.cn/index.php/archives/91/
更新:
2024 年 01 月 23 日 21 时
声明:
本文由博主原创,依据 CC BY-NC-SA 4.0 许可协议授权,转载请注明出处
文章二维码
新年灯笼
共计 0 条评论,点此发表评论
博客主页 星鹿语 漫游于星空的小鹿笔记 百度统计
渝ICP备2023014845号 技术支持 CC 星鹿语. 2024
打赏图
打赏博主
欢迎
欢迎
欢迎访问星鹿语
本博客所发布的各种软件文章仅限用于学习和研究目的; 任何人不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。 本站信息来自网络,版权争议与本站无关。 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。 如有侵权请邮件与我联系处理。
搜 索
足 迹
分 类
  • 简文
  • 技术
  • 娱乐