给网站“挂”上灯笼

简介: 给网站“挂”上灯笼

春节将至,年味渐浓。给自己的网站“挂”个灯笼,增加几分年味。

代码部分

html:

<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 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>

css:

.deng-box {
    position: fixed;
    top: -40px;
    right: 50px;
    z-index: 999;
}
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 120px;
    z-index: 999;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}
.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.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: #ffa500;
    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: #ffa500;
    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: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #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: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: 华文行楷, Arial, Lucida Grande, Tahoma, sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
.night .deng-t, .night .deng-box, .night .deng-box1 {
    background: transparent !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{
    pointer-events:none;
}

简单方式

如果觉得太麻烦或是编程小白,也没关系,复制以下代码粘贴到任意位置就可以了

<script type="text/javascript" src="https://api.ddkjt.com/api/lantern.js"></script>

更多精彩内容请关注点滴日记

目录
相关文章
|
小程序
微信小程序项目实例——备忘录
微信小程序项目实例——备忘录
|
11月前
|
弹性计算 应用服务中间件 定位技术
阿里云基于Anycast弹性公网IP实现多源站的就近访问加速
本文介绍了如何使用阿里云Anycast弹性公网IP实现基于地理位置的访问策略,通过在不同地区部署ECS服务器并绑定Anycast实例,实现就近加速访问。具体步骤包括创建ECS、创建Anycast实例、绑定资源和测试效果。
420 2
|
网络协议
TCP和UDP可以绑定同样的端口吗?
TCP和UDP可以绑定同样的端口吗?
|
11月前
|
消息中间件 缓存 NoSQL
Redis 高并发竞争 key ,如何解决这个难点?
本文主要探讨 Redis 在高并发场景下的并发竞争 Key 问题,以及较为常用的两种解决方案(分布式锁+时间戳、利用消息队列)。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
Redis 高并发竞争 key ,如何解决这个难点?
|
存储 应用服务中间件 nginx
成功解决:nginx: [emerg] unexpected “}“ in /etc/nginx/conf.d/gulimall.conf:10
这篇文章详细介绍了Linux虚拟机磁盘空间不足时的扩容流程,从外部配置到具体扩容操作,再到验证扩容效果的步骤。同时,也探讨了Docker容器磁盘空间耗尽的问题,并提供了解决方案,包括删除无用镜像和容器,以及如何重新配置Docker的存储位置。文章还涵盖了一些意外情况的处理方法,比如误删容器后的恢复策略,并最终展示了使用Docker安装nginx并成功访问的详细过程。
成功解决:nginx: [emerg] unexpected “}“ in /etc/nginx/conf.d/gulimall.conf:10
|
缓存 前端开发 JavaScript
前端项目性能优化:使用vite的分包策略
【8月更文挑战第4天】Vite性能优化-分包策略
468 2
前端项目性能优化:使用vite的分包策略
|
消息中间件 Java Kafka
zookeeper:Unexpected exception, exiting abnormally ::java.io.EOFException
zookeeper:Unexpected exception, exiting abnormally ::java.io.EOFException
454 1
zookeeper:Unexpected exception, exiting abnormally ::java.io.EOFException
|
负载均衡 Java API
什么是RPC
【9月更文挑战第8天】什么是RPC
1005 3
|
人工智能 自然语言处理 API
谷歌Gemini入口_(Google gemini Pro官方网站入口)
Gemini是 Google 开发的多模态 AI 语言模型。可以理解和生成人类语言,并协助各种与语言相关的任务。
|
SQL 安全 PHP
DVWA File Inclusion 通关解析
DVWA File Inclusion 通关解析