Last active
May 6, 2016 23:18
-
-
Save caseymhunt/5208144 to your computer and use it in GitHub Desktop.
Example of animated spotlights using HTML5 & CSS3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { background-color: black; color: white;} | |
| .spot1 { left: 40%; -webkit-animation: move 5s infinite;} | |
| .spot2 { left: 60%; -webkit-animation: move2 5s infinite;} | |
| .spotlight { | |
| position: absolute; | |
| width: 53px; | |
| height: 0px; | |
| border-top: 500px solid rgba(255,255,255,0.25); | |
| border-left: 40px solid transparent; | |
| border-bottom: 0px solid #575; | |
| border-right: 40px solid transparent; | |
| background-color: transparent; | |
| -webkit-transform-origin: 50% 100% 0; | |
| z-index: 0; | |
| } | |
| @-webkit-keyframes move { | |
| 0% { | |
| -webkit-transform: rotate(30deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(-30deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(30deg); | |
| } | |
| } | |
| @-webkit-keyframes move2 { | |
| 0% { | |
| -webkit-transform: rotate(-30deg); | |
| } | |
| 50% { | |
| -webkit-transform: rotate(30deg); | |
| } | |
| 100% { | |
| -webkit-transform: rotate(-30deg); | |
| } | |
| } | |
| #text { | |
| position: absolute; | |
| left: 48%; | |
| top: 25%; | |
| z-index: 999; | |
| color: rgba(255,255,255,0.15); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="text"> | |
| <h1> This is some text </h1> | |
| </div> | |
| <div class="spotlight spot1"></div> | |
| <div class="spotlight spot2"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment