You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
2.1 KiB
CSS
123 lines
2.1 KiB
CSS
1 month ago
|
@font-face {
|
||
|
|
font-family: Chap;
|
||
|
|
src: url(Chapaza.ttf);
|
||
|
|
}
|
||
|
|
@font-face {
|
||
|
|
font-family: Aer;
|
||
|
|
src: url(Aerolite.otf);
|
||
|
|
}
|
||
|
|
p{
|
||
|
|
font-family: Chap;
|
||
|
|
color:#8023FF;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
/*/.shift{
|
||
|
|
animation: mymove 25s infinite;
|
||
|
|
}
|
||
|
|
@keyframes mymove {
|
||
|
|
0% { color:#0E02FF; }
|
||
|
|
30% { color:RosyBrown; }
|
||
|
|
50% { color:thistle; }
|
||
|
|
70% { color:RosyBrown; }
|
||
|
|
100%{ color:#0E02FF; }
|
||
|
|
}/*/
|
||
|
|
h1{
|
||
|
|
font-family:Aer;
|
||
|
|
font-size:50px;
|
||
|
|
color:silver;
|
||
|
|
text-align:center;
|
||
|
|
}
|
||
|
|
audio{
|
||
|
|
text-align:center;
|
||
|
|
width:100%;
|
||
|
|
}
|
||
|
|
body{
|
||
|
|
background:WhiteSmoke;
|
||
|
|
}
|
||
|
|
html, body {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
-webkit-box-sizing:border-box;
|
||
|
|
-moz-box-sizing:border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
#all{
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
#lefty{
|
||
|
|
width:15%;
|
||
|
|
height:100%;
|
||
|
|
float:left;
|
||
|
|
text-align:justify;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
#middle{
|
||
|
|
width:100%;
|
||
|
|
height:100%;
|
||
|
|
float:left;
|
||
|
|
padding-left:30%;
|
||
|
|
padding-right:30%;
|
||
|
|
text-align:justify;
|
||
|
|
position:relative;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
@keyframes img1 {
|
||
|
|
0% { left:750px; top:500px;}
|
||
|
|
25% { left:400px; top:430px;}
|
||
|
|
50% { left:400px; top:530px;}
|
||
|
|
75% { left:300px; top:410px;}
|
||
|
|
100% { left:750px; top:500px;}
|
||
|
|
}
|
||
|
|
.img1{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
width:400px;
|
||
|
|
animation-name: img1;
|
||
|
|
animation-duration: 80s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes img2 {
|
||
|
|
0% { left:350px; top:300px;}
|
||
|
|
25% { left:400px; top:330px;}
|
||
|
|
50% { left:400px; top:130px;}
|
||
|
|
75% { left:300px; top:120px;}
|
||
|
|
100% { left:350px; top:300px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img2{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
width:400px;
|
||
|
|
animation-name: img2;
|
||
|
|
animation-duration: 100s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
@keyframes img3 {
|
||
|
|
0% { left:500px; top:300px;}
|
||
|
|
25% { left:470px; top:340px;}
|
||
|
|
50% { left:530px; top:380px;}
|
||
|
|
75% { left:436px; top:340px;}
|
||
|
|
100% { left:500px; top:300px;}
|
||
|
|
}
|
||
|
|
|
||
|
|
.img3{
|
||
|
|
position: absolute;
|
||
|
|
z-index: 2;
|
||
|
|
width:400px;
|
||
|
|
animation-name: img3;
|
||
|
|
animation-duration: 90s;
|
||
|
|
animation-iteration-count: infinite;
|
||
|
|
animation-fill-mode: forwards;
|
||
|
|
}
|