Sean_M Posted November 18, 2020 Share Posted November 18, 2020 Hi All I've tried tweaking it to fit the Frog platform but I'm having no luck making it work. Any ideas would be awesome! https://codemyui.com/christmas-lights-pure-css/ <ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> $globe-width: 12px; $globe-height: 28px; $globe-spacing: 40px; $globe-spread: 3px; $light-off-opacity: 0.4; body { background: #000; } .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; li { position: relative; animation-fill-mode: both; animation-iteration-count:infinite; list-style: none; margin: 0; padding: 0; display: block; width: $globe-width; height: $globe-height; border-radius: 50%; margin: $globe-spacing/2; display: inline-block; background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1); animation-name: flash-1; animation-duration: 2s; &:nth-child(2n+1) { background: rgba(0,255,255,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.5); animation-name: flash-2; animation-duration: 0.4s; } &:nth-child(4n+2) { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1); animation-name: flash-3; animation-duration: 1.1s; } &:nth-child(odd) { animation-duration: 1.8s; } &:nth-child(3n+1) { animation-duration: 1.4s; } &:before { content: ""; position: absolute; background: #222; width: ($globe-width - 2); height: $globe-height/3; border-radius: 3px; top: (0 - ($globe-height/6)); left: 1px; } &:after { content: ""; top: (0 - $globe-height/2); left: $globe-width - 3; position: absolute; width: $globe-spacing + 12; height: ($globe-height/3 * 2); border-bottom: solid #222 2px; border-radius: 50%; } &:last-child:after { content: none; } &:first-child { margin-left: -$globe-spacing; } } } @keyframes flash-1 { 0%, 100% { background: rgba(0,247,165,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,1);} 50% { background: rgba(0,247,165,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,247,165,0.2);} } @keyframes flash-2 { 0%, 100% { background: rgba(0,255,255,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,1);} 50% { background: rgba(0,255,255,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(0,255,255,0.2);} } @keyframes flash-3 { 0%, 100% { background: rgba(247,0,148,1); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,1);} 50% { background: rgba(247,0,148,$light-off-opacity); box-shadow: 0px $globe-height/6 $globe-width*2 $globe-spread rgba(247,0,148,0.2);} } Link to comment Share on other sites More sharing options...
pconkie Posted November 23, 2020 Share Posted November 23, 2020 <style> body { background: #000; } .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; } .lightrope li { position: relative; animation-fill-mode: both; animation-iteration-count: infinite; list-style: none; margin: 0; padding: 0; display: block; width: 12px; height: 28px; border-radius: 50%; margin: 20px; display: inline-block; background: rgba(0, 247, 165, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); animation-name: flash-1; animation-duration: 2s; } .lightrope li:nth-child(2n+1) { background: rgba(0, 255, 255, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5); animation-name: flash-2; animation-duration: 0.4s; } .lightrope li:nth-child(4n+2) { background: rgba(247, 0, 148, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); animation-name: flash-3; animation-duration: 1.1s; } .lightrope li:nth-child(odd) { animation-duration: 1.8s; } .lightrope li:nth-child(3n+1) { animation-duration: 1.4s; } .lightrope li:before { content: ""; position: absolute; background: #222; width: 10px; height: 9.3333333333px; border-radius: 3px; top: -4.6666666667px; left: 1px; } .lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18.6666666667px; border-bottom: solid #222 2px; border-radius: 50%; } .lightrope li:last-child:after { content: none; } .lightrope li:first-child { margin-left: -40px; } @keyframes flash-1 { 0%, 100% { background: rgba(0, 247, 165, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); } 50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2); } } @keyframes flash-2 { 0%, 100% { background: rgba(0, 255, 255, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1); } 50% { background: rgba(0, 255, 255, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2); } } @keyframes flash-3 { 0%, 100% { background: rgba(247, 0, 148, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2); } } </style> <ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 3 Link to comment Share on other sites More sharing options...
Sean_M Posted November 24, 2020 Author Share Posted November 24, 2020 18 hours ago, pconkie said: <style> body { background: #000; } .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; z-index: 1; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; } .lightrope li { position: relative; animation-fill-mode: both; animation-iteration-count: infinite; list-style: none; margin: 0; padding: 0; display: block; width: 12px; height: 28px; border-radius: 50%; margin: 20px; display: inline-block; background: rgba(0, 247, 165, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); animation-name: flash-1; animation-duration: 2s; } .lightrope li:nth-child(2n+1) { background: rgba(0, 255, 255, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5); animation-name: flash-2; animation-duration: 0.4s; } .lightrope li:nth-child(4n+2) { background: rgba(247, 0, 148, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); animation-name: flash-3; animation-duration: 1.1s; } .lightrope li:nth-child(odd) { animation-duration: 1.8s; } .lightrope li:nth-child(3n+1) { animation-duration: 1.4s; } .lightrope li:before { content: ""; position: absolute; background: #222; width: 10px; height: 9.3333333333px; border-radius: 3px; top: -4.6666666667px; left: 1px; } .lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18.6666666667px; border-bottom: solid #222 2px; border-radius: 50%; } .lightrope li:last-child:after { content: none; } .lightrope li:first-child { margin-left: -40px; } @keyframes flash-1 { 0%, 100% { background: rgba(0, 247, 165, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 1); } 50% { background: rgba(0, 247, 165, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2); } } @keyframes flash-2 { 0%, 100% { background: rgba(0, 255, 255, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 1); } 50% { background: rgba(0, 255, 255, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2); } } @keyframes flash-3 { 0%, 100% { background: rgba(247, 0, 148, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 1); } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2); } } </style> <ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> No surprise that the coding legend @pconkie comes to the rescue, haha. Thank you very much, awesome. Thought this would be nice, bringing some cheer to our users at the end of THIS year. I’ve tweaked the colours (to red, green, yellow) and position properties to expand over the whole page width (otherwise it’s limited to containing layout box) and works out well at lest for the template used. Results in image and tweaked code below. <style> body { background: #000; } .lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: absolute; top: -65px; left: -280px; z-index: 1; margin: 0 0 0 0; padding: 0; pointer-events: none; width: auto; } .lightrope li { position: relative; animation-fill-mode: both; animation-iteration-count: infinite; list-style: none; margin: 0; padding: 0; display: block; width: 12px; height: 28px; border-radius: 50%; margin: 20px; display: inline-block; background: rgba(12, 236, 65, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1); animation-name: flash-1; animation-duration: 2s; } .lightrope li:nth-child(2n+1) { background: rgba(0, 255, 255, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.5); animation-name: flash-2; animation-duration: 0.4s; } .lightrope li:nth-child(4n+2) { background: rgba(247, 24, 38, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 24, 38, 1); animation-name: flash-3; animation-duration: 1.1s; } .lightrope li:nth-child(odd) { animation-duration: 1.8s; } .lightrope li:nth-child(3n+1) { animation-duration: 1.4s; } .lightrope li:before { content: ""; position: absolute; background: #222; width: 10px; height: 9.3333333333px; border-radius: 3px; top: -4.6666666667px; left: 1px; } .lightrope li:after { content: ""; top: -14px; left: 9px; position: absolute; width: 52px; height: 18.6666666667px; border-bottom: solid #222 2px; border-radius: 50%; } .lightrope li:last-child:after { content: none; } .lightrope li:first-child { margin-left: -40px; } @keyframes flash-1 { 0%, 100% { background: rgba(12, 236, 65, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 1); } 50% { background: rgba(12, 236, 65, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(12, 236, 65, 0.2); } } @keyframes flash-2 { 0%, 100% { background: rgba(255, 236, 122, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 1); } 50% { background: rgba(255, 236, 122, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(255, 236, 122, 0.2); } } @keyframes flash-3 { 0%, 100% { background: rgba(247, 24, 38, 1); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 24, 38, 1); } 50% { background: rgba(247, 0, 148, 0.4); box-shadow: 0px 4.6666666667px 24px 3px rgba(247, 24, 38, 0.2); } } </style> <ul class="lightrope"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 2 1 Link to comment Share on other sites More sharing options...
ADT Posted November 24, 2020 Share Posted November 24, 2020 @pconkie @pconkie he's our man..... if he cant do it no one can!! ? 1 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now