thesd5x Posted June 29, 2021 Share Posted June 29, 2021 Site URL: https://www.thehabituallyelevated.com/habitually-gaming Below is the custom code I'm trying to list on my website: Glowing Animated Dots I've since made minor tweaks to try and adjust the appearance on the website but nothing as of yet. There is a full screen screenshot of my issue attached for reference. My website is The Habitually Elevated. I've watched several YouTube videos and have read several forums regarding what I thought was going to resolve my issue. Nothing has seemed to work so far... Maybe I'm simply confused or overlooking a small detail? The glowing dots are supposed to float around the page. My issue (as you can see) is how incredibly long the code block is that's on the page. Doesn't matter where on the page or which section the code itself is listed, same affect. Can some please help me to get my desired results? Thanks in advance! Link to comment
tuanphan Posted July 2, 2021 Share Posted July 2, 2021 Hi. Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesd5x Posted July 17, 2022 Author Share Posted July 17, 2022 On 7/2/2021 at 2:08 AM, tuanphan said: Hi. Do you still need help on this? Hi Yes! I still need assistance. Link to comment
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 The url doesn't exist https://www.thehabituallyelevated.com/habitually-gaming Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
thesd5x Posted July 18, 2022 Author Share Posted July 18, 2022 15 hours ago, tuanphan said: The url doesn't exist https://www.thehabituallyelevated.com/habitually-gaming Apologies. I've made changes to the website in the last year. The link can be found here. Below, is the code I've been trying to implement — <body> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> <div class="glowing"> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> </body> body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 100vh; background-color: #000; overflow: hidden; } .glowing { position: relative; min-width: 750px; height: 750px; margin: 150px; transform-origin: right; animation: colorChange 5s linear infinite; } .glowing:nth-child(even) { transform-origin: left; } @keyframes colorChange { 0% { filter: hue-rotate(0deg); transform: rotate(0deg); } 100% { filter: hue-rotate(360deg); transform: rotate(360deg); } } .glowing span { position: absolute; top: calc(80px * var(--i)); left: calc(80px * var(--i)); bottom: calc(80px * var(--i)); right: calc(80px * var(--i)); } .glowing span:before { content: ""; position: absolute; top: 50%; left: -8px; width: 15px; height: 15px; background: #f00; border-radius: 50%; } .glowing span:nth-child(3n + 1):before { background: rgba(134, 255, 0, 1); box-shadow: 0 0 20px rgba(134, 255, 0, 1), 0 0 40px rgba(134, 255, 0, 1), 0 0 60px rgba(134, 255, 0, 1), 0 0 80px rgba(134, 255, 0, 1), 0 0 0 8px rgba(134, 255, 0, 0.1); } .glowing span:nth-child(3n + 2):before { background: rgba(225, 214, 0, 1); box-shadow: 0 0 20px rgba(225, 214, 0, 1), 0 0 40px rgba(225, 214, 0, 1), 0 0 60px rgba(225, 214, 0, 1), 0 0 80px rgba(225, 214, 0, 1), 0 0 0 8px rgba(225, 214, 0, 0.1); } .glowing span:nth-child(3n + 3):before { background: rgba(0, 226, 255, 1); box-shadow: 0 0 20px rgba(0, 226, 255, 1), 0 0 40px rgba(0, 226, 255, 1), 0 0 60px rgba(0, 226, 255, 1), 0 0 80px rgba(0, 226, 255, 1), 0 0 0 8px rgba(0, 226, 255, 0.1); } .glowing span:nth-child(3n + 1) { animation: animate 10s alternate infinite; } .glowing span:nth-child(3n + 2) { animation: animate-reverse 3s alternate infinite; } .glowing span:nth-child(3n + 3) { animation: animate-reverse 8s alternate infinite; } @keyframes animate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes animate-reverse { 0% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } } Thank you in advance! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment