zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

导入文章 2024.7.23

Browse Source
This commit is contained in:
小赵同学 committed 2024-07-23 13:47:57 +08:00
1 parent ccc398bf36
commit 6eff722775
315 files changed
+62489 -330
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/post/71/index.html
+525
View File
@@ -0,0 +1,525 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>祝大家元旦快乐，给自己的博客加一个对联和灯笼</title>
<link rel='stylesheet' href='/css/light.css'>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<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="https://unpkg.com/@waline/client@v3/dist/waline.css" />
<link rel="stylesheet" href="https://usj.cc/usr/themes/Ying/css/barrager.css">
<script src="/js/jquery.min.js"></script>
<script src="https://usj.cc/usr/themes/Ying/js/jquery.barrager.js"></script>
<script src="/js/jquery.scrollUp.min.js"></script>
<script src="/js/pjax.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@waline/client@v3/dist/waline.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="Ying" />
</head>
</head>
<body>
<div class="main">
<div class="container">
<div class="header">
<div class="head_author_img load-memos-editor">
<img src="https://avatars.githubusercontent.com/u/94612053" 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="http://localhost:1313/">首页</a></li>
<li class="active"><a href="http://localhost:1313//about">关于</a></li>
<li class="active"><a href="http://localhost:1313//says">留言</a></li>
<li class="active"><a href="http://localhost:1313//archives">归档</a></li>
<li class="active"><a href="http://localhost:1313//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">
作者: 小赵同学 浏览: 字数: 670 分类:
<a href="%e6%95%99%e7%a8%8b">教程</a>
</div>
<div class="post-content" itemprop="articleBody">
<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="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;usj&#34;</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-box2&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;xian&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-b&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-t&#34;</span>&gt;年&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui shui-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-c&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-b&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-box3&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;xian&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-b&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-t&#34;</span>&gt;新&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui shui-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-c&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-b&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-box1&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;xian&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-b&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-t&#34;</span>&gt;乐&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui shui-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-c&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-b&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-box&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;xian&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-b&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;deng-t&#34;</span>&gt;快&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui shui-a&#34;</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-c&#34;</span>&gt;
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;shui-b&#34;</span>&gt;&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</span></span><span style="display:flex;"><span>&lt;/<span style="color:#f92672">div</span>&gt;
</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="color:#f8f8f2;background-color:#272822;-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:#a6e22e">deng-box</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">35</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box1</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">right</span>: <span style="color:#ae81ff">-41</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box2</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">40</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box3</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">fixed</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-30</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">9999</span>;
</span></span><span style="display:flex;"><span> pointer-events: <span style="color:#66d9ef">none</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box1</span> .<span style="color:#a6e22e">deng</span><span style="color:#f92672">,</span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-box3</span> .<span style="color:#a6e22e">deng</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">120</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.8</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-100</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">5</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">30</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#fc903d</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">120</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.8</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-100</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">3</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">box-shadow</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#fa6c00</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-a</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">100</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.1</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#dc8f03</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-b</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">45</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">90</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#d8000f</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: rgba(<span style="color:#ae81ff">216</span>, <span style="color:#ae81ff">0</span>, <span style="color:#ae81ff">15</span>, <span style="color:#ae81ff">.1</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">-4</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">8</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">26</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span> <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">#dc8f03</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">xian</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">2</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#dc8f03</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-a</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">relative</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin</span>: <span style="color:#ae81ff">-5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">59</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">animation</span>: swing <span style="color:#ae81ff">4</span><span style="color:#66d9ef">s</span> <span style="color:#66d9ef">infinite</span> <span style="color:#66d9ef">ease-in-out</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform-origin</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span> <span style="color:#ae81ff">-45</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-b</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">14</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-2</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">#dc8f03</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">50</span><span style="color:#66d9ef">%</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">shui-c</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">18</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">-2</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">35</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span>:<span style="color:#a6e22e">before</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">top</span>: <span style="color:#ae81ff">-7</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">29</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#34; &#34;</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">z-index</span>: <span style="color:#ae81ff">999</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#dc8f03</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: linear-gradient(<span style="color:#66d9ef">to</span> <span style="color:#66d9ef">right</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng</span>:<span style="color:#a6e22e">after</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">position</span>: <span style="color:#66d9ef">absolute</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">bottom</span>: <span style="color:#ae81ff">-7</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">left</span>: <span style="color:#ae81ff">10</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">height</span>: <span style="color:#ae81ff">12</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">width</span>: <span style="color:#ae81ff">60</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">content</span>: <span style="color:#e6db74">&#34; &#34;</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">display</span>: <span style="color:#66d9ef">block</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">margin-left</span>: <span style="color:#ae81ff">20</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border-radius</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">5</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">border</span>: <span style="color:#66d9ef">solid</span> <span style="color:#ae81ff">1</span><span style="color:#66d9ef">px</span> <span style="color:#ae81ff">#dc8f03</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#66d9ef">orange</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: linear-gradient(<span style="color:#66d9ef">to</span> <span style="color:#66d9ef">right</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>, <span style="color:#66d9ef">orange</span>, <span style="color:#ae81ff">#dc8f03</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">deng-t</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-family</span>: <span style="color:#960050;background-color:#1e0010">黑体</span>, Arial, Lucida Grande, Tahoma, <span style="color:#66d9ef">sans-serif</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-size</span>: <span style="color:#ae81ff">3.2</span><span style="color:#66d9ef">rem</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">color</span>: <span style="color:#ae81ff">#dc8f03</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">font-weight</span>: <span style="color:#ae81ff">700</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">line-height</span>: <span style="color:#ae81ff">85</span><span style="color:#66d9ef">px</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">text-align</span>: <span style="color:#66d9ef">center</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-box</span><span style="color:#f92672">,</span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-box1</span><span style="color:#f92672">,</span>
</span></span><span style="display:flex;"><span> .<span style="color:#a6e22e">night</span> .<span style="color:#a6e22e">deng-t</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">background</span>: <span style="color:#ae81ff">0</span> <span style="color:#ae81ff">0</span> <span style="color:#75715e">!important</span>
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">-moz-keyframes</span> <span style="color:#f92672">swing</span> {
</span></span><span style="display:flex;"><span> <span style="color:#f92672">0</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">50</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">100</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-moz-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> @<span style="color:#66d9ef">-webkit-keyframes</span> <span style="color:#f92672">swing</span> {
</span></span><span style="display:flex;"><span> <span style="color:#f92672">0</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">50</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span>
</span></span><span style="display:flex;"><span> <span style="color:#f92672">100</span><span style="color:#f92672">%</span> {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">-webkit-</span><span style="color:#66d9ef">transform</span>: rotate(<span style="color:#ae81ff">-10</span><span style="color:#66d9ef">deg</span>)
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> }
</span></span></code></pre></div><p>然后适当调整就完成啦，好了，本文就到这里</p>
<p>!!!</p>
<!-- raw HTML omitted -->
<p>作为一个爱整活的博主，不会满足就加几个灯笼就完了，打开网址输入自己的博客域名</p>
<p>发现自己的博客pc端布局两边十分的空旷，突然脑子里联想到我为什么不整个对联在两边</p>
<p><img src="https://usj.cc/usr/uploads/2022/01/3858558307.png" alt=""></p>
<p>于是说干就干，去千图网找了素材，就开整，因为自己找合适且适用于对联的字体找了很久</p>
<p><img src="https://usj.cc/usr/uploads/2022/01/1727183617.png" alt=""></p>
<p>肝了一个小时，不停的删删改改，终究还是把对联的样子整了出来</p>
<p>接下来就是肝代码，最近也在初步的对JavaScript学习，想着如果我全部用js写，还能检验一下自己最近学的怎么样</p>
<p>于是就开整，以下对联全都是用js写的，还是问了大三学长部分问题，不然自己还写不出来，在此特别谢谢学长</p>
<p>考虑到有的博客有很多侧栏，特别的考虑了对联遮挡问题，我还给对联加了关闭按钮，具体自己可以看看本站的效果</p>
<p>[reply]</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#f92672">&lt;</span><span style="color:#a6e22e">script</span><span style="color:#f92672">&gt;</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">=</span> <span style="color:#ae81ff">0</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">heartBeat</span>() {
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">var</span> <span style="color:#a6e22e">diffY</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (document.<span style="color:#a6e22e">documentElement</span> <span style="color:#f92672">&amp;&amp;</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">scrollTop</span>)
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">diffY</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">documentElement</span>.<span style="color:#a6e22e">scrollTop</span>;
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#66d9ef">if</span> (document.<span style="color:#a6e22e">body</span>)
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">diffY</span> <span style="color:#f92672">=</span> document.<span style="color:#a6e22e">body</span>.<span style="color:#a6e22e">scrollTop</span>
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> .<span style="color:#ae81ff">1</span> <span style="color:#f92672">*</span> (<span style="color:#a6e22e">diffY</span> <span style="color:#f92672">-</span> <span style="color:#a6e22e">lastScrollY</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">if</span> (<span style="color:#a6e22e">percent</span> <span style="color:#f92672">&gt;</span> <span style="color:#ae81ff">0</span>) <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">ceil</span>(<span style="color:#a6e22e">percent</span>);
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">else</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">=</span> Math.<span style="color:#a6e22e">floor</span>(<span style="color:#a6e22e">percent</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;left&#34;</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">=</span> parseInt(document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;left&#34;</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;px&#34;</span>;
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;right&#34;</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span> <span style="color:#f92672">=</span> parseInt(document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">&#34;right&#34;</span>).<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">top</span>) <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span> <span style="color:#f92672">+</span> <span style="color:#e6db74">&#34;px&#34;</span>;
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">=</span> <span style="color:#a6e22e">lastScrollY</span> <span style="color:#f92672">+</span> <span style="color:#a6e22e">percent</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">close_left2</span>() {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">left2</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">visibility</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;hidden&#39;</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> <span style="color:#66d9ef">function</span> <span style="color:#a6e22e">close_right2</span>() {
</span></span><span style="display:flex;"><span> <span style="color:#a6e22e">right2</span>.<span style="color:#a6e22e">style</span>.<span style="color:#a6e22e">visibility</span> <span style="color:#f92672">=</span> <span style="color:#e6db74">&#39;hidden&#39;</span>;
</span></span><span style="display:flex;"><span> }
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;style type=\&#34;text\/css\&#34;&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;#left,#right{position:absolute;}&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;.imzql{width:100px;height:auto;line-height:5px}&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;#left2 img{max-width: 100%;width: 70px;}&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;#right2 img{max-width: 100%;width: 70px;}&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;\/style&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;div id=\&#34;left\&#34; style=\&#34;top:112px;left:50px\&#34;&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;div id=\&#34;left2\&#34; class=\&#34;imzql\&#34;&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;img border=0 src=https://cdn.usj.cc/left.jpg&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;br&gt;&lt;a href=\&#34;javascript:close_left2();\&#34; title=\&#34;关闭左边的对联\&#34;&gt;×&lt;\/a&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;\/div&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;\/div&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;div id=\&#34;right\&#34; style=\&#34;top:112px;right:50px\&#34;&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;div id=\&#34;right2\&#34; class=\&#34;imzql\&#34;&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;img border=0 src=https://cdn.usj.cc/right.jpg&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;br&gt;&lt;a href=\&#34;javascript:close_right2();\&#34; title=\&#34;关闭右边的对联\&#34;&gt;×&lt;\/a&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;\/div&gt;&#34;</span>);
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">&#34;&lt;\/div&gt;&#34;</span>);
</span></span><span style="display:flex;"><span><span style="color:#f92672">&lt;</span><span style="color:#960050;background-color:#1e0010">/script&gt;</span>
</span></span></code></pre></div><p>[/reply]</p>
<p>这里需要注意需要把 <a href="https://cdn.usj.cc/xxx.jpg">https://cdn.usj.cc/xxx.jpg</a> 下载下来，接着上传为自己的本地图片，因为这里图片使用的是自己的腾讯云文件托管，需要添加为referer白名单，否则直接引用会裂图</p>
<p>曾经被油老师嘲讽自己的思考问题不全面，每次整活都没考虑到移动端，所以这次对移动端也做了特别考虑，为了更好的去适应访客效果，我计划在低于1500分辨率的电子设备上不显示对联，否则在小屏幕的手机端，对联会显示出来遮挡对文章的正常浏览</p>
<p>当然控制方法也很简单，直接用css进行控制就好了，有一些设备的分辨率大概在1440，显示了就会影响侧栏的内容显示，当然我已经写了两个关闭按钮去控制，毕竟每次要去关闭两张图片会麻烦</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">1500px</span><span style="color:#f92672">)</span>{#left<span style="color:#f92672">,</span>#right{<span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">none</span> <span style="color:#75715e">!important</span>}}
</span></span></code></pre></div><p>在主题的自定义css加入这个代码即可解决问题，灯笼的问题同理，直接在自定义cssjiaru</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-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:#66d9ef">media</span> <span style="color:#f92672">(</span><span style="color:#f92672">max-width</span>:<span style="color:#a6e22e">1500px</span><span style="color:#f92672">)</span>{#usj{<span style="color:#66d9ef">display</span>:<span style="color:#66d9ef">none</span> <span style="color:#75715e">!important</span>}}
</span></span></code></pre></div><p>这样效果基本上就弄好了，是不是很容易理解</p>
<p>后来学长建议对联跟随侧栏的拉条移动而移动会更好</p>
<p>这个比较简单直接在</p>
<p><code>document.writeln(&quot;&lt;\/div&gt;&quot;);</code></p>
<p>的下方加入</p>
<p><code>window.setInterval(&quot;heartBeat()&quot;,1);</code></p>
<p>即可，是不是非常简单，咱们看看具体的效果</p>
<p><img src="https://usj.cc/usr/uploads/2022/01/1933999639.png" alt=""></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
rel="stylesheet"
href="https://unpkg.com/@waline/client@v3/dist/waline.css"
/>
<div id="waline"></div>
<script type="module">
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
window.walineInit = walineInit;
window.initWaline = function() {
walineInit({
el: '#waline',
serverURL: 'https://waline.usj.cc',
lang:"zh-cn",
imageUploader:false,
search:false,
copyright:false
});
};
window.initWaline();
</script>
</div>
<script type="text/javascript">
$(document).ready(function () {
var currentPath = "\/post\/71\/";
console.log(currentPath);
fetchCommentsAndCreateBarrager(currentPath, {
looper_time: 3000,
defaultAvatar: 'static/default-avatar.png',
defaultInfo: 'No comment',
defaultLink: '#',
close: true,
speed: 6,
color: '#fff',
old_ie_color: '#000000'
});
});
</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>
</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 type="module">
import { init as walineInit } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';
window.walineInit = walineInit;
window.initWaline = function() {
walineInit({
el: '#waline',
serverURL: 'https://waline.usj.cc',
lang:"zh-cn",
imageUploader:false,
search:false,
copyright:false
});
};
window.initWaline();
</script>
</body>
</html>