Template:Prophecy.css

From The Wiki Camp 2
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);}
         }