Jump to content

Recommended Posts

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!

twitch and youtube.png

Link to comment
  • Replies 4
  • Views 441
  • Created
  • Last Reply

Top Posters In This Topic

  • 1 year later...
15 hours ago, tuanphan said:

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.