#6: Animated Spotlight Effect (complete)

6-animated-spotlight-effect-complete.markdown

#6: Animated Spotlight Effect (complete)

From the collection 10 CSS3 Projects: Branding and Presentation by Kezz Bracey.

A Pen by Envato Tuts+ on CodePen.

License.

index.html

<div class="wrapper">
  
  <div class="backdrop"></div>
  
  <div class="stage_floor"></div>
  
  <div class="stage_highlight"></div>
  
  <div class="spotlight_swivel">
    
    <div class="lamp"></div>
    
    <div class="spotlight"></div>
    
  </div>
  
</div>

style.css

/* 
Base spotlight concept from http://www.rwe-uk.com/blog/comments/rich_css_spotlight_with_elliptical_gradients_in_safari_chrome_firefox/

Lamp effect supported by Chrome and Safari, but not Firefox. Spotlight effect supported in all three.
*/

* {
  box-sizing: border-box;
}
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  background: black;
  overflow: hidden;
}
.wrapper {
  height: 100vh;
  width: 150vh;
  margin: 0 auto;
  position: relative;
}
.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: linear-gradient(#000000, rgba(25,53,93,1) 90%, rgba(25,53,93,1));
}
.stage_floor {
  content: '';
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  height: 150%;
  background-image: radial-gradient(rgba(54,90,143,0.9), rgba(54,90,143,0));
  transform: scale(1.0,0.3);
}
.stage_highlight {
  position: absolute;
  top: 0;
  left: 25vh;
  width: 100vh;
  height: 100%;
  overflow: hidden;
  background-image: radial-gradient(ellipse closest-side at 50% 82%, rgb(84,120,173), rgba(84,120,173,0) 100%);
  animation: move_highlight 5s linear infinite;
}
.spotlight_swivel {
  animation: rotate_spotlight 5s linear infinite;
}
.lamp {
  position: absolute;
  width: 40vh;
  height: 400vh;
  background-image: radial-gradient(ellipse, rgba(82,116,168,0.5), rgba(82,116,168,0.2) 25%, rgba(82,116,168,0) 50%);
  top:-220vh;
  left:55vh;
  transform: perspective(23vh) rotateX(30deg);
}
.spotlight {
  opacity: 0.5;
  transform: scale(1.5,3);
  position: absolute;
  top: -20vh;
  left: calc(50% - 75vh);
}
.spotlight::after {
  content: '';
  position: absolute;
  top: -50vh;
  background-image: radial-gradient(ellipse closest-corner at 75% 75%, rgba(55,89,138,0.2), rgba(55,89,138,0));
  border-radius: 100%;
  width: 100vh;
  height: 100vh;
  clip: rect(50vh, 100vh, 100vh, 50vh);
  transform: rotate(45deg);
}

@keyframes rotate_spotlight {
  0% {
    transform: rotate(0deg) scaleY(1) translateY(0);
  }
  25% {
    transform: rotate(-15deg) scaleY(1.1) translateY(-3vh);
  }
  50% {
    transform: rotate(0deg) scaleY(1) translateY(0);
  }
  75% {
    transform: rotate(15deg) scaleY(1.1) translateY(-3vh);
  }
}

@keyframes move_highlight {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(25vh);
  }
  50% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-25vh);
  }
}