Jump to content

User:Chaotic Enby/LightsUp.css

From Wikipedia, the free encyclopedia
Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.
#blueLight
{
	opacity: 0;
	position: fixed;
	top: -150px;
	left: 20%;
	width: 200px;
	height: 500px;
	background: linear-gradient(rgba(0, 76, 168, 0.5), rgba(0, 76, 168, 0));
	transform: perspective(10px) rotateX(2.5deg) rotate(-20deg);
	pointer-events: none;
	
	animation: 4s linear 0s infinite alternate rotate-blue;
	animation-play-state: paused;
}

#blueLight2
{
	opacity: 0; position: fixed; top: -150px; right: 19%; width: 200px; height: 500px; background: linear-gradient(rgba(0, 76, 168, 0.15), rgba(0, 76, 168, 0)); transform: perspective(10px) rotateX(2.5deg) rotate(17deg); pointer-events: none;
	
	animation: 4s linear 0s infinite alternate rotate-blue2;
	animation-play-state: paused;
}

#pinkLight
{
	opacity: 0; position: fixed; top: -150px; right: 20%; width: 200px; height: 500px; background: linear-gradient(rgba(214, 2, 112, 0.5), rgba(214, 2, 112, 0)); transform: perspective(10px) rotateX(2.5deg) rotate(20deg); pointer-events: none;
	
	animation: 4s linear 0s infinite alternate rotate-pink;
	animation-play-state: paused;
}

#pinkLight2
{
	opacity: 0; position: fixed; top: -150px; left: 19%; width: 200px; height: 500px; background: linear-gradient(rgba(214, 2, 112, 0.15), rgba(214, 2, 112, 0)); transform: perspective(10px) rotateX(2.5deg) rotate(-17deg); pointer-events: none;
	
	animation: 4s linear 0s infinite alternate rotate-pink2;
	animation-play-state: paused;
}

@keyframes rotate-blue {
  from {
    transform: perspective(10px) rotateX(2.5deg) rotate(-20deg);
  }
  to {
    transform: perspective(10px) rotateX(2.5deg) rotate(0deg) translateX(-67px);
  }
}

@keyframes rotate-pink {
  from {
    transform: perspective(10px) rotateX(2.5deg) rotate(20deg);
  }
  to {
    transform: perspective(10px) rotateX(2.5deg) rotate(0deg) translateX(67px);
  }
}

@keyframes rotate-pink2 {
  from {
    transform: perspective(10px) rotateX(2.5deg) rotate(-17deg);
  }
  to {
    transform: perspective(10px) rotateX(2.5deg) rotate(3deg) translateX(-67px);
  }
}

@keyframes rotate-blue2 {
  from {
    transform: perspective(10px) rotateX(2.5deg) rotate(17deg);
  }
  to {
    transform: perspective(10px) rotateX(2.5deg) rotate(-3deg) translateX(67px);
  }
}