8.9 修改代码高亮样式
This commit is contained in:
小赵同学 committed
1 parent
62cac6c7b0
commit
2e11da0d0b
15 files changed
+2414
-2410
No files matched your search
+277
-277
@@ -86,269 +86,269 @@
|
||||
<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><<span style="color:#f92672">div</span> <span style="color:#a6e22e">id</span><span style="color:#f92672">=</span><span style="color:#e6db74">"usj"</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box2"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>年</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"usj"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box2"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>年<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box3"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box3"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>新</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>新<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box1"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box1"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>乐</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span><<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-box"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"xian"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>乐<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-box"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"xian"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-b"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"deng-t"</span>>快</<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui shui-a"</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-c"</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-b"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"deng-t"</span><span style="color:#000;font-weight:bold">></span>快<span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui shui-a"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-c"</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <<span style="color:#f92672">div</span> <span style="color:#a6e22e">class</span><span style="color:#f92672">=</span><span style="color:#e6db74">"shui-b"</span>></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> </<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span></<span style="color:#f92672">div</span>>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"shui-b"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||||
</span></span></code></pre></div><p>接着就是怼css，分别为四个灯笼，输出新年快乐四个字，分别给他们设为deng-box，deng-box2，deng-box3，deng-box4，当然每个博客模版都是需要自己对deng-box的top和left值进行适当调整，你也可以参考以下css代码</p>
|
||||
<div class="highlight"><pre tabindex="0" style="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> }
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-41</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box2</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">40</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">fixed</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-30</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">9999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">pointer-events</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">none</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box3</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">30</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fc903d</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">120</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.8</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">3</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">box-shadow</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#fa6c00</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">100</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">90</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#d8000f</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rgba</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">216</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">15</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">.1</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-4</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">8</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">26</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">xian</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-a</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">relative</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">59</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">animation</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#000">swing</span> <span style="color:#0000cf;font-weight:bold">4</span><span style="color:#204a87;font-weight:bold">s</span> <span style="color:#204a87;font-weight:bold">infinite</span> <span style="color:#204a87;font-weight:bold">ease-in-out</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform-origin</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span> <span style="color:#0000cf;font-weight:bold">-45</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-b</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">14</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">50</span><span style="color:#204a87;font-weight:bold">%</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">shui-c</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">18</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-2</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">35</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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">" "</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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">before</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">top</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">29</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">z-index</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">999</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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">" "</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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">after</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">position</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">absolute</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">bottom</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">-7</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">width</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">content</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#4e9a06">" "</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">block</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">margin-left</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">20</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border-radius</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">5</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">border</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">solid</span> <span style="color:#0000cf;font-weight:bold">1</span><span style="color:#204a87;font-weight:bold">px</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">linear-gradient</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">to</span> <span style="color:#204a87;font-weight:bold">right</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">orange</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-family</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#a40000">黑体</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Arial</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Lucida</span> <span style="color:#000">Grande</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#000">Tahoma</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#204a87;font-weight:bold">sans-serif</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-size</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">3.2</span><span style="color:#204a87;font-weight:bold">rem</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">color</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">#dc8f03</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">font-weight</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">700</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">line-height</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">85</span><span style="color:#204a87;font-weight:bold">px</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">text-align</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87;font-weight:bold">center</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> .<span style="color:#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 style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-box1</span><span style="color:#ce5c00;font-weight:bold">,</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">night</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#000">deng-t</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">background</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#0000cf;font-weight:bold">0</span> <span style="color:#8f5902;font-style:italic">!important</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> @<span style="color:#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 style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-moz-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#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 style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#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 style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-moz-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> @<span style="color:#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 style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">-webkit-keyframes</span> <span style="color:#204a87;font-weight:bold">swing</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">0</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#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 style="color:#204a87;font-weight:bold">50</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#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><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">100</span><span style="color:#ce5c00;font-weight:bold">%</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">-webkit-</span><span style="color:#204a87;font-weight:bold">transform</span><span style="color:#000;font-weight:bold">:</span> <span style="color:#204a87">rotate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">-10</span><span style="color:#204a87;font-weight:bold">deg</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span></code></pre></div><p>然后适当调整就完成啦，好了，本文就到这里</p>
|
||||
<p>!!!</p>
|
||||
<!-- raw HTML omitted -->
|
||||
@@ -364,46 +364,46 @@
|
||||
<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"><</span><span style="color:#a6e22e">script</span><span style="color:#f92672">></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">&&</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">></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">"left"</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">"left"</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">"px"</span>;
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">getElementById</span>(<span style="color:#e6db74">"right"</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">"right"</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">"px"</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">'hidden'</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">'hidden'</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">"<style type=\"text\/css\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#left,#right{position:absolute;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">".imzql{width:100px;height:auto;line-height:5px}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#left2 img{max-width: 100%;width: 70px;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"#right2 img{max-width: 100%;width: 70px;}"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/style>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"left\" style=\"top:112px;left:50px\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"left2\" class=\"imzql\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<img border=0 src=https://cdn.usj.cc/left.jpg>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<br><a href=\"javascript:close_left2();\" title=\"关闭左边的对联\">×<\/a>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"right\" style=\"top:112px;right:50px\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<div id=\"right2\" class=\"imzql\">"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<img border=0 src=https://cdn.usj.cc/right.jpg>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<br><a href=\"javascript:close_right2();\" title=\"关闭右边的对联\">×<\/a>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span> document.<span style="color:#a6e22e">writeln</span>(<span style="color:#e6db74">"<\/div>"</span>);
|
||||
</span></span><span style="display:flex;"><span><span style="color:#f92672"><</span><span style="color:#960050;background-color:#1e0010">/script></span>
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#000">script</span><span style="color:#ce5c00;font-weight:bold">></span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">heartBeat</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">diffY</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span> <span style="color:#ce5c00;font-weight:bold">&&</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">documentElement</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">)</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">body</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">scrollTop</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000;font-weight:bold">.</span><span style="color:#0000cf;font-weight:bold">1</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">diffY</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">lastScrollY</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">ceil</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">else</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">floor</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">percent</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"left"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"right"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">top</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#4e9a06">"px"</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">lastScrollY</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#000">percent</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_left2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">left2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">close_right2</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000">right2</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">style</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">visibility</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">'hidden'</span><span style="color:#000;font-weight:bold">;</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<style type=\"text\/css\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left,#right{position:absolute;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">".imzql{width:100px;height:auto;line-height:5px}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#left2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"#right2 img{max-width: 100%;width: 70px;}"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/style>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left\" style=\"top:112px;left:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"left2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/left.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_left2();\" title=\"关闭左边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right\" style=\"top:112px;right:50px\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<div id=\"right2\" class=\"imzql\">"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<img border=0 src=https://cdn.usj.cc/right.jpg>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<br><a href=\"javascript:close_right2();\" title=\"关闭右边的对联\">×<\/a>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">writeln</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"<\/div>"</span><span style="color:#000;font-weight:bold">);</span>
|
||||
</span></span><span style="display:flex;"><span><span style="color:#ce5c00;font-weight:bold"><</span><span style="color:#a40000">/script></span>
|
||||
</span></span></code></pre></div><p>[/reply]</p>
|
||||
<p>这里需要注意需要把
|
||||
<a
|
||||
@@ -415,9 +415,9 @@
|
||||
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>}}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">left</span><span style="color:#ce5c00;font-weight:bold">,</span><span style="color:#000;font-weight:bold">#</span><span style="color:#000">right</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||||
</span></span></code></pre></div><p>在主题的自定义css加入这个代码即可解决问题，灯笼的问题同理，直接在自定义cssjiaru</p>
|
||||
<div class="highlight"><pre tabindex="0" style="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>}}
|
||||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-css" data-lang="css"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">@</span><span style="color:#204a87;font-weight:bold">media</span> <span style="color:#ce5c00;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">max-width</span><span style="color:#000;font-weight:bold">:</span><span style="color:#5c35cc;font-weight:bold">1500px</span><span style="color:#ce5c00;font-weight:bold">)</span><span style="color:#000;font-weight:bold">{#</span><span style="color:#000">usj</span><span style="color:#000;font-weight:bold">{</span><span style="color:#204a87;font-weight:bold">display</span><span style="color:#000;font-weight:bold">:</span><span style="color:#204a87;font-weight:bold">none</span> <span style="color:#8f5902;font-style:italic">!important</span><span style="color:#000;font-weight:bold">}}</span>
|
||||
</span></span></code></pre></div><p>这样效果基本上就弄好了，是不是很容易理解</p>
|
||||
<p>后来学长建议对联跟随侧栏的拉条移动而移动会更好</p>
|
||||
<p>这个比较简单直接在</p>
|
||||
|
||||
Reference in new issue
Block a user