Template:Prophecy.css
Jump to navigation
Jump to search
body {
background-color: black;
margin: 0;
padding: 0;
color: #2ad7e1;
font-size: 1.2em;
}
.PROPHECY {
position: relative;
width: 500px;
height: 300px;
margin: auto;
}
.image-wrapper {
position: relative;
width: 500px;
height: 200px;
margin: auto;
}
.masked-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.mask-bg1 {
opacity: 0.2;
animation: sway1 3s ease-in-out infinite;
}
.mask-bg2 {
opacity: 0.15;
animation: sway2 3s ease-in-out infinite;
}
.bgcontainer {
position: absolute;
width: 500px;
height: 300px;
margin: auto;
overflow: hidden;
}
.background {
width: 2528px;
height: 1904px;
background: url("https://camp2.rectangle.zone/subwikifiles/wc2/images/e/ea/Prophecy_Background.png") repeat;
background-size: 50%;
image-rendering: pixelated;
animation: skymove 30s linear infinite reverse;
background-position: center;
z-index: 1;
}
.background:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 85%, rgba(0, 0, 0, 1) 100%), radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, #000000 70%);
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.content {
width: 2528px;
height: 1904px;
background: url("https://camp2.rectangle.zone/subwikifiles/wc2/images/7/71/Prophecy_Foreground.png") repeat;
background-size: 50%;
image-rendering: pixelated;
animation: skymove 22s linear infinite;
background-position: center;
}
.movey {
width: 500px;
margin: auto;
position: relative;
animation: updown 3s ease-in-out infinite;
z-index: 5;
}
.lastprophecy {
animation: lastprophecy 2.5s linear infinite;
z-index: 10;
}
@keyframes skymove {
from {
background-position: 0% 0%;
}
to {
background-position: 100% 100%;
}
}
@keyframes sway1 {
0%,
100% {
top: 7px;
left: 10px;
}
50% {
top: -7px;
left: -10px;
}
}
@keyframes sway2 {
0%,
100% {
top: 15px;
left: 20px;
}
50% {
top: -15px;
left: -20px;
}
}
@keyframes updown {
0%,
100% {
top: 45px;
}
50% {
top: 35px;
}
}
@keyframes lastprophecy {
0%, 100% {filter: hue-rotate(130deg);}
50% {filter: hue-rotate(50deg);}
}