Skip to content
Snippets Groups Projects
Commit 10f223ad authored by Shibo Wang's avatar Shibo Wang
Browse files

Merge branch 'local_main' into 'main' 

Local main

See merge request !34
parents 9f873abb e5371416
No related branches found
No related tags found
1 merge request!34Local main
Pipeline #117240 passed
Stage: build
Stage: deploy
Hide whitespace changes
Inline Side-by-side
static/css/base.css
+ 73
− 0
View file @ 10f223ad
......@@ -72,3 +72,76 @@ iframe {
border: 0;
}
div.background{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background:linear-gradient(to bottom,#a6fff3,#b3fff5);
background-size:200% 200%;
animation:bjmove 30s infinite linear;
z-index: 999;
}
@keyframes bjmove{ /*背景移动动画*/
from {background-position: 0 200% ;}
to {background-position:0 0;}
}
.li-cir{
list-style:none; /*去除ul li的默认样式*/
width:30px;
height:30px;
border-radius:50%;
position: absolute;
bottom:-160px;
animation: ppmove 15s infinite;
}
@keyframes ppmove { /*泡泡移动动画*/
0% {
opacity: 0.5;
transform: translateY(0px) }
25% {
opacity: 0.8;
transform: translateY(-400px) }
50% {
opacity: 1;
transform: translateY(-600px) }
100% {
opacity: 1;
transform: translateY(-1000px) }
}
.animbox {
margin: 45vh auto;
width: 200px;
text-align: center;
}
/*设置各竖条的共有样式*/
.animbox > div {
background-color: #279fcf;
width: 8px;
height: 100px;
border-radius: 5px;
margin: 2px;
animation-fill-mode: both;
display: inline-block;
animation: anim 0.9s 0s infinite cubic-bezier(.11, .49, .38, .78);
}
/*设置动画延迟*/
.animbox > :nth-child(2), .animbox > :nth-child(4) {
animation-delay: 0.25s !important;
}
.animbox > :nth-child(1), .animbox > :nth-child(5) {
animation-delay: 0.5s !important;
}
/*定义动画*/
@keyframes anim {
0% { transform: scaley(1); }
80% { transform: scaley(0.3); }
90% { transform: scaley(1); }
}
static/js/nav.js
+ 3
− 1
View file @ 10f223ad
......@@ -15,5 +15,7 @@ for (var i = 0; i < navList.length; i++) {
}
window.onload = function () {
$('.loadpic').css('display', 'none');
$('.background').css('background', 'rgba(255, 255, 255, 0.003)');
$('.background').css('z-index', '0');
$('.animbox').css('display', 'none');
}
\ No newline at end of file
static/js/pao.js 0 → 100644
+ 22
− 0
View file @ 10f223ad
$(document).ready(function(){
for(var i=0; i<9; i++){
var rand = new Array();//rgb色彩值
for(var j=0; j<3; j++){
rand[j] = Math.floor(Math.random() * 26 + 230); // 230 ~ 255
}
var op = Math.floor(Math.random()* 5 + 2) / 10; //均衡获取rgba的透明度的随机数
var left = Math.floor(Math.random()* 100 )+"%"; //泡泡随机分布的距离
var delay = Math.floor(Math.random()* 10)+"s"; //每个泡泡出现推迟的时间
var dur = Math.floor(Math.random()* 10 + 11)+"s"; //泡泡完成一个周期所需要的时间
var enlarge = Math.floor(Math.random()* 40 + 70); //泡泡扩大到的宽和高
$("#ul-cir").append("<li class='li-cir'></li>"); //增加一个泡泡
$("#ul-cir li").eq(i).css("background","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+op+")");//选取ul li中匹配的索引顺序为i的元素赋予背景颜色
$("#ul-cir li").eq(i).css("border","rgba("+rand[0]+","+rand[1]+","+rand[2]+","+1+") 1px solid");//给泡泡加上边框
$("#ul-cir li").eq(i).css("left",left); //泡泡出现的距离值
$("#ul-cir li").eq(i).css("animation-delay",delay); //泡泡出现推迟的时间
$("#ul-cir li").eq(i).css("animation-duration",dur); //泡泡完成一个周期所需要的时间
$("#ul-cir li").eq(i).css("width",enlarge).css("height",enlarge); //扩大泡泡
}
});
\ No newline at end of file
wiki/layout.html
+ 9
− 3
View file @ 10f223ad
......@@ -27,9 +27,14 @@
<body>
<!-- loading -->
<div class="loadpic">
<div class="spinner-border text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="background"> <ul id="ul-cir"></ul>
<div class="animbox">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Navigation -->
{% include 'menu.html' %}
......@@ -65,6 +70,7 @@
<script src="{{ url_for('static',filename='js/title-list.js') }}"></script>
<script src="{{ url_for('static',filename='js/pic-link.js') }}"></script>
<script src="{{ url_for('static',filename='js/animate.js') }}"></script>
<script src="{{ url_for('static',filename='js/pao.js') }}"></script>
</body>
</html>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment