Mirages折腾笔记 Ⅰ

先对站点背景大图那一块进行修改,先插个仿气泡漂浮...

---

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