RedXen/Homepage
RedXen
/
Homepage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix some bugs, patch the stylesheet

This commit is contained in:
Alex 2020-06-06 13:12:18 +02:00
parent 12586cc84a
commit 506dbb0528
1 changed files with 43 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
css/main.less
View File

@ -30,42 +30,48 @@ html {
.head {
width: 100%;
margin-bottom: 20px;
height: calc(100vh);
height: 100vh;
position: relative;
overflow: hidden;
.slideshow {
width: 100%;
height: 100%;
li {
&:nth-child(1) span {
background-image: url(../res/slideshow/1.jpg);
animation-delay: 15s;
&:nth-child(1) {
div {
animation-delay: -15s;
}
span {
animation-delay: 0s;
background-image: url(../res/slideshow/1.jpg);
}
}
&:nth-child(2) span {
background-image: url(../res/slideshow/2.jpg);
animation-delay: 10s;
&:nth-child(2) {
div {
animation-delay: -10s;
}
span {
animation-delay: -5s;
background-image: url(../res/slideshow/2.jpg);
}
}
&:nth-child(3) span {
background-image: url(../res/slideshow/3.jpg);
animation-delay: 5s;
&:nth-child(3) {
div {
animation-delay: -5s;
}
span {
animation-delay: -10s;
background-image: url(../res/slideshow/3.jpg);
}
}
&:nth-child(4) span {
background-image: url(../res/slideshow/4.jpg);
opacity: 1;
animation-delay: 0s;
}
&:nth-child(1) div {
opacity: 1;
animation-delay: 0s;
}
&:nth-child(2) div {
animation-delay: 5s;
}
&:nth-child(3) div {
animation-delay: 10s;
}
&:nth-child(4) div {
animation-delay: 15s;
&:nth-child(4) {
div {
animation-delay: 0s;
}
span {
animation-delay: -15s;
background-image: url(../res/slideshow/4.jpg);
}
}
div {
position: absolute;
@ -73,9 +79,10 @@ html {
right: 0;
padding: 10px;
z-index: 10;
opacity: 0;
animation-timing-function: ease-in-out;
animation: textslideshow 20s infinite;
animation-name: textslideshow;
animation-duration: 20s;
animation-iteration-count: infinite;
}
}
span {
@ -84,12 +91,12 @@ html {
top: 0;
width: 100%;
height: 100%;
opacity: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 5;
animation: slideshow 20s infinite;
animation-name: slideshow;
animation-iteration-count: infinite;
animation-duration: 20s;
animation-timing-function: ease-in-out;
}
}
@ -111,7 +118,8 @@ html {
justify-content: center;
img {
animation-timing-function: ease-in-out;
animation: slide-in-top 1s;
animation-duration: 1s;
animation-name: slide-in-top;
width: 50%;
}
p {
@ -134,6 +142,7 @@ html {
flex-direction: row;
justify-content: space-evenly;
align-items: flex-start;
text-align: center;
width: 100%;
overflow: hidden;
background: @bg;
@ -191,8 +200,8 @@ ul {
margin-block-end: 0;
}
@keyframes slideshow {
0%,35%,100% { opacity: 0 }
5%,25% { opacity: 1 }
0%,35%,100% { opacity: 0 }
}
@keyframes textslideshow {
10%,25% { transform: translateX(0px); opacity: 1 }