zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e3bf839e9b1122d4057e5c47f110ebffbd41b8a8
blog/public/post/71/index.html
T
小赵同学 e3bf839e9b 2024.7.30
2024-07-30 09:35:12 +08:00

518 lines
62 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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/mywaline.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.js"></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="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="/">首页</a></li>
<li class="active"><a href="/about/">关于</a></li>
<li class="active"><a href="/says/">留言</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">
作者: 小赵同学 浏览: 字数: 2152 分类:
<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 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="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 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
rel="stylesheet"
href="/css/mywaline.css"
/>
<div id="waline" uk-scrollspy="cls:uk-animation-fade;delay: 300"></div>
<script src="/js/waline.js"></script>
</div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var currentPath = "\/post\/71\/";
fetchCommentsAndCreateBarrager(currentPath, {
looper_time: 3000,
defaultAvatar: 'static/default-avatar.png',
defaultInfo: 'No comment',
defaultLink: '#',
speed: 10,
});
});
</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/waline.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
if (document.querySelector("#waline")) {
Waline.init({
el: '#waline',
serverURL: 'https://waline.usj.cc',
lang: "zh-cn",
imageUploader: false,
search: false,
copyright: false,
reaction: [
'/image/EhqxZ6DFIJojGNa.gif',
'/image/qmf5As3evWNXwGQ.gif',
'/image/ueWLPkmYw75x4cs.gif',
'/image/nsC1OGoBKfa8Hel.gif',
'/image/VKuBXqR91TPHnyc.gif',
'/image/2OmAWPeulq4ta8T.gif'
],
});
}
});
</script>
</body>
</html>
Reference in new issue View Git Blame Copy Permalink