I love You (neon lights)

HTML
<html > <head> <meta charset="UTF-8"> <title>I love you</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="bg"></div> <div class="content"> <span id="switch">Click Me</span></div> <div id="lights"> I<br> <span id="fade">Love </span> You<br > <span id ="trav">For</span> ever</div> </body> </html>
CSS
@import url(https://fonts.googleapis.com/css?family=Monoton|Caveat|); @-webkit-keyframes turnonlights { 0% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; } 1% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 4% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 7% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; } 8% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 12% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 22% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 34% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 36% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 42% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 55% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 60% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 63% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 67% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 84% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 86% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 96% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 100% { text-shadow: 2px 2px 15px rgba(0,0,0,0.9), 10px 0px 50px #b30059, 0 0 10px #38eeff, 0 0 50px #38eeff; color:#b30059; } } @-moz-keyframes turnonlights { 0% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; } 1% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 4% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 7% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 2px #38eeff; } 8% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 1px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 12% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 22% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 34% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 36% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 42% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 55% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 60% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 63% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 67% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 84% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 15px #38eeff, 0 0 20px #ff00de, 0 0 30px #ff00de, 0 0 40px #ff00de; } 86% { color: #6d5669; text-shadow: 0 0 3px #38eeff, 0 0 5px #38eeff; } 96% { color: #ff55de; text-shadow: 0 0 5px #38eeff, 0 0 10px #38eeff, 0 0 17px #ff00de, 0 0 38px #ff00de} 100% { text-shadow: 2px 2px 15px rgba(0,0,0,0.3), 0 0px 15px #b30059, 0 0 10px #38eeff, 0 0 50px #38eeff; color:#b30059; } } body { background-color:#111; font-family: 'Caveat', Helvetica, Arial, sans-serif; } .content #switch { padding-left:45%; font-size: 32px; font-family:'Caveat'; cursor:pointer; text-align: center; color: #b30059; } .content { position:relative; } #lights{ font-size:100px; text-align:center; color:#000; } #trav{ font-family: 'Monoton', cursive; -webkit-animation: blink 0.1s infinite alternate; -moz-animation: blink 0.1s infinite alternate; -o-animation: blink 0.1s infinite alternate; animation: blink 0.1s infinite alternate; } #fade { font-family: 'Monoton', cursive; opacity: 0.7; -webkit-animation: fade 0.1s infinite reverse; -moz-animation: fade 0.1s infinite reverse; -o-animation: fade 0.1s infinite reverse; animation: fade 0.1s infinite reverse; } @-webkit-keyframes blink { 45% { opacity: 0.5; } } @-o-keyframes blink { 70% { opacity: 0.7; } } @keyframes blink { 70% { opacity: 0.7; } } @-moz-keyframes fade { 40% { opacity: 0.8; } 42% { opacity: 0.1; } 43% { opacity: 0.8; } 45% { opacity: 0.1; } 46% { opacity: 0.8; } } @-webkit-keyframes fade { 40% { opacity: 0.8; } 42% { opacity: 0.1; } 43% { opacity: 0.8; } 45% { opacity: 0.1; } 46% { opacity: 0.8; } } @-o-keyframes fade { 40% { opacity: 0.8; } 42% { opacity: 0.1; } 43% { opacity: 0.8; } 45% { opacity: 0.1; } 46% { opacity: 0.8; } } @keyframes fade { 40% { opacity: 0.8; } 42% { opacity: 0.1; } 43% { opacity: 0.8; } 45% { opacity: 0.1; } 46% { opacity: 0.8; } } .animate { text-align: center; font-family: 'Caveat', Helvetica, Arial, sans-serif; font-size: 100px; -webkit-animation-name: turnonlights; -webkit-animation-duration: 3.0s; -webkit-animation-fill-mode: both; -webkit-animation-timing-function: steps(2, start); -moz-animation-name: turnonlights; -moz-animation-duration: 3.0s; -moz-animation-fill-mode: both; -moz-animation-timing-function: steps(2, start); }
JAVASCRIPT
var toggle = document.getElementById('switch'); toggle.onclick = function() { this.innerText='By akhil'; this.style.cursor='none'; this.style.color='#bef'; document.getElementById('lights').className = 'animate'; document.getElementById('switch').className = 'animate'; document.getElementById('trav').style.color='#ccf'; };
Expand for more options Login