先对站点背景大图那一块进行修改,先插个仿气泡漂浮...
CSS 源码来自三秋的博客的《css 仿气泡漂浮》
如果懒得去请复制下面的,在此之前请对模板的文件进行备份
HTML 部分展开目录
- <!--bubbles-->
- <ul class="bg-bubbles">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
CSS 部分展开目录
- .bg-bubbles {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 1;
- }
-
- ul,li {
- margin: 0;
- padding: 0;
- }
-
- .bg-bubbles li {
- position: absolute;
- list-style: none;
- display: block;
- width: 40px;
- height: 40px;
- background-color: rgba(255,255,255,.07);
- bottom: -160px;
- -webkit-animation: square 25s infinite;
- animation: square 25s infinite;
- -webkit-transition-timing-function: linear;
- transition-timing-function: linear;
- border-radius: 5rem;
- }
-
- .bg-bubbles li:nth-child(1) {
- left: 10%
- }
-
- .bg-bubbles li:nth-child(2) {
- left: 20%;
- width: 80px;
- height: 80px;
- -webkit-animation-delay: 200ms;
- animation-delay: 200ms;
- -webkit-animation-duration: 17s;
- animation-duration: 17s
- }
-
- .bg-bubbles li:nth-child(3) {
- left: 25%;
- -webkit-animation-delay: 400ms;
- animation-delay: 400ms
- }
-
- .bg-bubbles li:nth-child(4) {
- left: 40%;
- width: 60px;
- height: 60px;
- -webkit-animation-duration: 30s;
- animation-duration: 30s;
- background-color: rgba(255, 255, 255, .1)
- }
-
- .bg-bubbles li:nth-child(5) {
- left: 70%
- }
-
- .bg-bubbles li:nth-child(6) {
- left: 80%;
- width: 80px;
- height: 80px;
- -webkit-animation-delay: 5s;
- animation-delay: 5s;
- background-color: rgba(255, 255, 255, .15)
- }
-
- .bg-bubbles li:nth-child(7) {
- left: 32%;
- width: 60px;
- height: 60px;
- -webkit-animation-delay: 7s;
- animation-delay: 7s
- }
-
- .bg-bubbles li:nth-child(8) {
- left: 55%;
- width: 20px;
- height: 20px;
- -webkit-animation-delay: 15s;
- animation-delay: 15s;
- -webkit-animation-duration: 40s;
- animation-duration: 40s
- }
-
- .bg-bubbles li:nth-child(9) {
- left: 25%;
- width: 10px;
- height: 10px;
- -webkit-animation-delay: 2s;
- animation-delay: 2s;
- -webkit-animation-duration: 40s;
- animation-duration: 40s;
- background-color: rgba(255, 255, 255, .1)
- }
-
- .bg-bubbles li:nth-child(10) {
- left: 90%;
- width: 80px;
- height: 80px;
- -webkit-animation-delay: 11s;
- animation-delay: 11s
- }
-
- @-webkit-keyframes square {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0)
- }
-
- 100% {
- -webkit-transform: translateY(-700px) rotate(600deg);
- transform: translateY(-700px) rotate(600deg)
- }
- }
-
- @keyframes square {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0)
- }
-
- 100% {
- -webkit-transform: translateY(-700px) rotate(600deg);
- transform: translateY(-700px) rotate(600deg)
- }
- } /* 漂浮 */
修改步骤展开目录
修改的文件叫 header.php
用编辑器打开我用的是 Sublime Text 你也可以用 Notepad++
首先搜索 blog-background 定位到 94 行左右
然后回车输入 <link rel="stylesheet" href="//api.th9.bid/css/bubble.css?theme=mirages">
(我这里直接引用 CSS)
然后再回车输入
- <!--bubbles-->
- <ul class="bg-bubbles">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
然后我完成后代码应该是这样的:
- <div class="blog-background"></div>
- <link rel="stylesheet" href="//api.th9.bid/css/bubble.css">
- <!--bubbles-->
- <ul class="bg-bubbles">
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- <li></li>
- </ul>
Ps: 我还是初学这一方面所以可能有错误欢迎大佬指出
Use "CC BY-NC-SA 3.0 CN" for licensing
Hran 大佬 @(滑稽) 看到你这么折腾。。。#(皱眉)
Hran 大佬应该不会建议我乱改的..... 吧 #(观察)