Sean_M 24 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);} } Quote Link to post Share on other sites
pconkie 635 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 Quote Link to post Share on other sites
Sean_M 24 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 Quote Link to post Share on other sites
ADT 1,270 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 Quote Link to post Share on other sites