516 lines
102 KiB
HTML
516 lines
102 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
|
||
<head>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>祝大家元旦快乐，给自己的博客加一个对联和灯笼</title>
|
||
<link rel="alternate" type="application/rss+xml" title="优世界" href="/rss.xml">
|
||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||
<link rel='stylesheet' href='/css/main.css'>
|
||
<link rel="stylesheet" href="/css/normalize.css">
|
||
<link rel="stylesheet" href="/css/remixicon.css">
|
||
<link rel="stylesheet" href="/css/uikit.min.css">
|
||
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||
<link rel="stylesheet" href="/css/Artalk.css"/>
|
||
<script src="/js/jquery.min.js"></script>
|
||
<script src="/js/barrage.min.js"></script>
|
||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||
<script src="/js/instantpage.min.js" type="module" defer></script>
|
||
<script src="/js/pjax.js"></script>
|
||
|
||
<link rel="stylesheet" href="/css/mywaline.css" />
|
||
|
||
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||
<meta name="template" content="Amigo" />
|
||
</head>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="main">
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="head_author_img load-memos-editor">
|
||
<img src="/image/avatar.jpg" class="blog-img" width="80" height="80" alt="优世界" />
|
||
</div>
|
||
<div class="site-description">
|
||
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||
<nav class="nav social uk-visible@m">
|
||
<ul class="flat">
|
||
|
||
|
||
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||
|
||
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||
|
||
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||
|
||
|
||
</ul>
|
||
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||
</nav>
|
||
</div>
|
||
<nav class="nav">
|
||
<ul class="flat">
|
||
<li class="active"><a href="/">首页</a></li>
|
||
<li class="active"><a href="/about/">关于</a></li>
|
||
<li class="active"><a href="/ly/">留言</a></li>
|
||
<li class="active"><a href="/archives/">归档</a></li>
|
||
<li class="active"><a href="/links/">友链</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
|
||
|
||
<div id="pjax-container">
|
||
<article style="margin-bottom: 3.5em;">
|
||
<h1 class="post-title" itemprop="name headline">祝大家元旦快乐，给自己的博客加一个对联和灯笼</h1>
|
||
<div class="meta">
|
||
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: 2152 分类:
|
||
|
||
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
||
|
||
</div>
|
||
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p; cls: uk-animation-fade; delay: 0">
|
||
<p>首先祝各位朋友元旦快乐，距离上次更新差不多十天前了，有小伙伴问我这段时间在干嘛</p>
|
||
<p>简单给大家聊一下，差不多25号我就放寒假了，放假回家一直在老家，大部分时间帮父母干农活</p>
|
||
<p>虽然很累，但也有它的趣味，不得不说，抛开手机电脑，静下心来享受田园生活，不由让人沉浸</p>
|
||
<p>昨天也在逛博友的博客，大部分博主都码出了自己的2021年的年度总结，总结一年的得与失</p>
|
||
<p>离春节还有差不多一个月的时间，对于我来说，现在把年度总结码出来还是为时过早</p>
|
||
<p>逛了大多数博友，博客都挂起了象征新年的灯笼，给博客加了点年味，心想自己也整一个</p>
|
||
<p>打开搜索引擎，搜索了一下相关代码，基本上都是来自于各大资源网，有的居然还是收费</p>
|
||
<p>大概谷歌浏览器搜了一下，还是如愿以偿找到了代码，但是代码不太精简，我删除了一些不必要的代码</p>
|
||
<p>终究还是实现了，这里简单讲一下方法以及实现原理，首先就是怼几个div标签，进行骨架构成</p>
|
||
<p>这边建议找到自己的主题模版的footer.php，在适当位置加入下面这些代码</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"usj"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box2"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>年<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box3"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>新<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box1"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>乐<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>快<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span></code></pre></div><p>接着就是怼css，分别为四个灯笼，输出新年快乐四个字，分别给他们设为deng-box，deng-box2，deng-box3，deng-box4，当然每个博客模版都是需要自己对deng-box的top和left值进行适当调整，你也可以参考以下css代码</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-41</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box2</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">40</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">30</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fc903d</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">3</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fa6c00</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">26</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">xian</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">59</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">14</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-c</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">18</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">before</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">29</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">999</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">after</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin-left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-family</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#a40000">黑体</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Arial</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Lucida</span> <span style="color:#000">Grande</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Tahoma</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">sans-serif</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">3.2</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">color</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-weight</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">700</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">line-height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">85</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">text-align</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">center</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#8f5902;font-style:italic">!important</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-moz-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-webkit-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span></code></pre></div><p>然后适当调整就完成啦，好了，本文就到这里</p>
|
||
<p>!!!</p>
|
||
<!-- raw HTML omitted -->
|
||
<p>作为一个爱整活的博主，不会满足就加几个灯笼就完了，打开网址输入自己的博客域名</p>
|
||
<p>发现自己的博客pc端布局两边十分的空旷，突然脑子里联想到我为什么不整个对联在两边</p>
|
||
<p>
|
||
<img data-lazy-src="/pics/2022/01/3858558307.png" alt="" class="lazyload"></p>
|
||
<p>于是说干就干，去千图网找了素材，就开整，因为自己找合适且适用于对联的字体找了很久</p>
|
||
<p>
|
||
<img data-lazy-src="/pics/2022/01/1727183617.png" alt="" class="lazyload"></p>
|
||
<p>肝了一个小时，不停的删删改改，终究还是把对联的样子整了出来</p>
|
||
<p>接下来就是肝代码，最近也在初步的对JavaScript学习，想着如果我全部用js写，还能检验一下自己最近学的怎么样</p>
|
||
<p>于是就开整，以下对联全都是用js写的，还是问了大三学长部分问题，不然自己还写不出来，在此特别谢谢学长</p>
|
||
<p>考虑到有的博客有很多侧栏，特别的考虑了对联遮挡问题，我还给对联加了关闭按钮，具体自己可以看看本站的效果</p>
|
||
<p>[reply]</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">heartBeat</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">diffY</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span> <span style="color:#ce5c00;font-weight:bold">&&</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">)</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">lastScrollY</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">ceil</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">floor</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_left2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">left2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_right2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">right2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<style type=\"text\/css\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left,#right{position:absolute;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">".imzql{width:100px;height:auto;line-height:5px}"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#right2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/style>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left\" style=\"top:112px;left:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/left.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_left2();\" title=\"关闭左边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right\" style=\"top:112px;right:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/right.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_right2();\" title=\"关闭右边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||
</span></span></code></pre></div><p>[/reply]</p>
|
||
<p>这里需要注意需要把
|
||
<a
|
||
|
||
href="/tiaozhuan/index.html?target=aHR0cHM6Ly9jZG4udXNqLmNjL3h4eC5qcGc%3d"
|
||
|
||
target="_blank"
|
||
>
|
||
https://cdn.usj.cc/xxx.jpg</a> 下载下来，接着上传为自己的本地图片，因为这里图片使用的是自己的腾讯云文件托管，需要添加为referer白名单，否则直接引用会裂图</p>
|
||
<p>曾经被油老师嘲讽自己的思考问题不全面，每次整活都没考虑到移动端，所以这次对移动端也做了特别考虑，为了更好的去适应访客效果，我计划在低于1500分辨率的电子设备上不显示对联，否则在小屏幕的手机端，对联会显示出来遮挡对文章的正常浏览</p>
|
||
<p>当然控制方法也很简单，直接用css进行控制就好了，有一些设备的分辨率大概在1440，显示了就会影响侧栏的内容显示，当然我已经写了两个关闭按钮去控制，毕竟每次要去关闭两张图片会麻烦</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">left</span><span style="color:#ce5c00;font-weight:bold">,</span><span style="color:#000;font-weight:bold">#</span><span style="color:#000">right</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||
</span></span></code></pre></div><p>在主题的自定义css加入这个代码即可解决问题，灯笼的问题同理，直接在自定义cssjiaru</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">usj</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||
</span></span></code></pre></div><p>这样效果基本上就弄好了，是不是很容易理解</p>
|
||
<p>后来学长建议对联跟随侧栏的拉条移动而移动会更好</p>
|
||
<p>这个比较简单直接在</p>
|
||
<p><code>document.writeln("<\/div>");</code></p>
|
||
<p>的下方加入</p>
|
||
<p><code>window.setInterval("heartBeat()",1);</code></p>
|
||
<p>即可，是不是非常简单，咱们看看具体的效果</p>
|
||
<p>
|
||
<img data-lazy-src="/pics/2022/01/1933999639.png" alt="" class="lazyload"></p>
|
||
<p>晚安，我的朋友们</p>
|
||
|
||
</div>
|
||
<div class="post-tags" style="margin-top: -30px;">
|
||
<nav class="nav tags">
|
||
<ul class="flat">
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
<hr class="uk-divider-icon">
|
||
<div id="comments" class="comments-area">
|
||
|
||
|
||
|
||
<link href="/css/Artalk.css" rel="stylesheet" />
|
||
|
||
<div id="Comments"></div>
|
||
|
||
<script src="/js/Artalk.js"></script>
|
||
<script>
|
||
Artalk.init({
|
||
el: '#Comments',
|
||
server: 'https://artalk.5b2.cn',
|
||
site: '优世界',
|
||
flatMode: true
|
||
})
|
||
</script>
|
||
|
||
|
||
</div>
|
||
|
||
<script>
|
||
function loadBarrager() {
|
||
|
||
var currentPath = "\/post\/71\/";
|
||
|
||
|
||
if (currentPath.includes("post") || currentPath.includes("says")) {
|
||
|
||
fetchCommentsAndCreateBarrager(currentPath, {
|
||
looper_time: 3000,
|
||
defaultAvatar: 'static/default-avatar.png',
|
||
defaultInfo: 'No comment',
|
||
defaultLink: '#',
|
||
speed: 10,
|
||
});
|
||
}
|
||
}
|
||
</script>
|
||
<script async src="/js/bsz.js"></script>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="footer">
|
||
<nav class="nav" style="clear: both;">
|
||
© 2019 - 2024
|
||
<br>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||
<br>
|
||
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
||
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
||
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
||
</a>提供CDN加速服务
|
||
<br>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/iconfont.js"></script>
|
||
<script src="/js/lightgallery.umd.min.js"></script>
|
||
<script src="/js/uikit.min.js"></script>
|
||
<script src="/js/EasyLazyload.min.js"></script>
|
||
<script src="/js/view-image.min.js"></script>
|
||
<script src="/js/main.js"></script>
|
||
<script src="/js/mypjax.js"></script>
|
||
<script src="/js/nprogress.js"></script>
|
||
<script src="/js/echarts.min.js"></script>
|
||
<script src="/js/tiaozhuan.js"></script>
|
||
<script src="/js/Artalk.js"></script>
|
||
<script async src="/js/bsz.js"></script>
|
||
</body>
|
||
|
||
</html>
|
||
|