xiuno_plugin/z_daisy/view/css/bubble.css

/* 这是主视图的样式, 放进气泡的 CSS 文件以减少占用 */
/*#masthead{box-shadow:0 .125rem .4375rem rgba(0,0,0,0.7);-webkit-box-shadow:0 .125rem .4375rem rgba(0,0,0,0.7)}*/
#masthead{position:relative;display:table;text-align:center;width:100%;overflow:hidden;transition:all 1s;color:#fff;background-color:#1e1e1f}
#masthead::before {content: "";position: absolute;top: 0;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.3);}
#masthead::after {content: '';width: 150%;height: 4.375rem;background: #EEEEF2;left: -25%;bottom: -2.875rem;border-radius: 100%;position: absolute;}

/* 标题 12px等于0.75rem*/
.blog-title {font-size: 2.625rem;line-height: 1.5;margin-bottom: .5rem;font-weight: 200;}
.light{font-weight:300 !important}
.inner{display:table-cell;vertical-align:middle;position:relative;z-index:10;width:100%}

.blog-description {font-size: .75rem;}
.blog-background.loading{opacity:0}
.blog-background{
    /*background-attachment: fixed;*/
    display:block;
    width:100%;height:100%;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    position:absolute;
    left:0;top:0;
    -webkit-filter: brightness(0.7);
    -moz-filter: brightness(0.7);
    -o-filter: brightness(0.7);
    filter: brightness(0.7);
    -webkit-transition:1s ease all;
    -moz-transition:1s ease all;
    -o-transition:1s ease all;
    transition:5s ease all;
    opacity:1
}


/*!
 * CSS source:https://iu.tn/archives/qi-pao-piao-fu.html
 */

 .bg-bubbles {
display:block;
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)
}
 } /* 漂浮 */