该广告由百度联盟提供,不代表本站立场。

元旦将至,给你的博客加个喜庆灯笼吧

话不多说直接上代码

<!-- 元宵节灯笼样式开始 -->
<style>
    @media only screen and (min-width: 1124px) {
        .nav-menu {
            padding-right: 96px;
        }
    }
    @media only screen and (max-width: 760px) {
        .deng-box, .deng-box1 {
            width: 40%;
        }
        .right {
            float: left!important;
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .right {
            float: left!important;
        }
    }
    .deng-box {
        position: fixed;
        top: -40px;
        right: -20px;
        z-index: 999;
    }
    .deng-box1 {
        position: fixed;
        top: -30px;
        right: 10px;
        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);
    }
    @font-face {
        font-family: "华文行楷";
        src: url('/fonts/华文行楷.ttf');
    }
    .deng-t {
        font-family: 华文行楷;
        font-size: 26px;
        color: #dc8f03;
        font-weight: bold;
        line-height: 44px;
        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)
        }
    }
    </style>
    <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>
    <!-- 元宵节灯笼样式结束 -->

这段代码翻到你博客的</header>后,即可,样式大小自己调吧,css基础,最后放张效果图:

该广告由百度联盟提供,不代表本站立场。
64位Linux系统 API数据分析 Android应用市场 Android开发 Android电视盒子 Android签名证书生成 Apk上架应用商店 Aplayer报错解决方案 Aplayer播放器 App Store CDN DSDT Django Excel FM发射器 Git GitHub GitHub page Github Git用户名邮箱修改 Google Analytics Google Play Google/Baidu search Google插件 H5与CSS3 HBuilder HBuilder打包APP HBuilder打包ipa Hexo Hexo-neat插件 Homebrew Cask JavaScript学习笔记 Linux常见命令 MySQL数据库 Python Python爬虫 SEO优化 Videoscribe Vue Vue电商 Windows10 api接口搭建 console css特效 git clone 速度过慢 hexo hexo-admin插件 hexo-sakura主题 hexo-tag-aplayer插件 hexo主题 hexo博客美化 homebrew iOS iOS开发 js用法、范例 koolshare live2d看板动画 node.js npm 安装踩过的坑 oc引导 openwrt软路由系统 python qlv视频下载 robots.txt valine评论 win10 wx-server-sdk 个人主页 个人开发者 中国移动魔百盒 中文免费版 中文破解版 云函数 优化访问速度 傻瓜EXE 全球加速 博客 又拍云 反编译 和风天气 国内CODing托管 图床 域名加速 学习笔记 宝塔 实践项目 小技巧 小程序开发 开源小游戏 微信公众号 微信小程序 微信小程序开发 微擎 必应每日一图 抖音小程序 教程 数据可视化 本地打包iOS包 机械革命 树莓派 树莓派4b 爱奇艺下载器 电池补丁 百度云cdn 百度地图api 百度搜索 百度收录 百度权重 百度统计 突发奇想 站点地图 笔记 腾讯广告 腾讯视频 腾讯视频下载 自制小玩意儿 访问者地图 谷歌Adsense 软路由 静态数据库 面试题 黑苹果

等待也是约会的一部分嘛