Responsive without using any framework, RGB color animation with Pause, Play, Reset button.
- Apply css animation.
- Apply css media query to make it responsive.
let result = document.getElementById('result') hr = 0 min = 0 sec = 0 disSEC = 0 disMIN = 0 disHR = 0 let strBTN = ()=>{ let start = document.getElementById('start') myVar = setInterval(()=>{ sec++ if(sec==60){ sec = 0 min++ } if(min==60){ min = 0 hr++ } if(sec < 10){ disSEC = '0' + sec.toString() }else{ disSEC = sec } if(min < 10){ disMIN = '0' + min.toString() }else{ disMIN = min } if(hr < 10){ disHR = '0' + hr.toString() }else{ disHR = hr } result.innerHTML = `${disHR}:${disMIN}:${disSEC}` },1000) } let rstBTN =()=>{ hr = 0 min = 0 sec = 0 clearTimeout(myVar) result.innerHTML = `0${hr}:0${min}:0${sec}` }
*{ margin: 0; padding: 0; box-sizing:border-box ; } html{ font-family: Arial, Helvetica, sans-serif; font-size: 62.5%; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; background: black; } .display{ width: 400px; height: 100px; border: 10px solid red; position: relative; border-radius: 10px; animation: RGB 4s ease infinite forwards; box-shadow: rgb(255 0 0 / 36%) 1px 17px 65px 19px, rgb(255 0 0 / 37%) 0px 0px 44px 6px; } .display #result{ position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; font-size: 5rem; color: red; animation: txt 4s ease infinite forwards; } @keyframes txt{ 0%{color: red; } 25%{color: green; } 50%{color: blue; } 75%{color: yellow; } } .btn{ display: inline-block; text-decoration: none; padding-top: 0.4em; padding-bottom: 0.4em; color: white; height: 100%; width: 100%; text-align: center; font-size: 2rem; text-transform: uppercase; z-index: 999; user-select: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } .main-box{ position: relative; display: inline-block; height: 41px; width: 119px; border: 3px solid red; animation: rgb 4s ease infinite forwards; margin-top: 50px; border-radius: 10px; } .mid-box{ margin-left: 10px; margin-right: 10px; } .box{ position: absolute; height: 100%; width: 100%; z-index: 2; opacity: 1; } .btn:focus{ color: gray; } @keyframes rgb{ 0%{border-color: red; } 25%{border-color: green; } 50%{border-color: blue; } 75%{border-color: yellow; } } @keyframes RGB{ 0%{border-color: red; box-shadow: rgb(255 0 0 / 36%) 1px 17px 65px 19px, rgb(255 0 0 / 37%) 0px 0px 44px 6px; } 25%{border-color: green; box-shadow: rgba(0, 128, 0, 0.438) 1px 17px 65px 19px, rgba(0, 128, 0, 0.5) 0px 0px 44px 6px; } 50%{border-color: blue; box-shadow: rgba(0, 0, 255, 0.438) 1px 17px 65px 19px, rgba(0, 0, 255, 0.438) 0px 0px 44px 6px; } 75%{border-color: yellow; box-shadow: rgba(255, 255, 0, 0.459) 1px 17px 65px 19px, rgba(255, 255, 0, 0.459) 0px 0px 44px 6px; } } @media (max-width:500px){ html{ font-size: 50%; } .display{ width: 200px; height: 100px; } .contenor{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .main-box{ display: inline-block; margin-top: 20px; } .btn{ padding-top: 0.6em; cursor: pointer; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } }
Submitted by Shuvranil Mondal (Shuvranil002)
Download packets of source code on Coders Packet
Comments