CSS-Animation with two radial gradients moving/spinning inside the clipped mask png-CodePudding

As you can see on the two provided images which come from a video, I want to create two spinning radial gradients inside a png. I already managed to use the mask property to create a pretty accurate radial-gradient inside the png, but I failed to create two radial gradients at different positions inside the png and making them move correctly.

.box {
  display:inline-block;
  width:300px;
  -webkit-mask:url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;  
 mask:url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  background: #9b59b6; /*Fallback if gradients don't work */
  background:radial-gradient(ellipse, rgba(255,255,255,1) 0%, rgba(197,251,255,1) 6%, rgba(64,188,255,1) 12%, rgba(4,15,51,1) 28%);
}

/* maintain the square ratio */
.box::before {
  content:"";
  display:block;
  padding-top:100%;
}
/**/

<div ></div>

This is the PNG I use to mask: pngtomask

How it should rotate and look:

rotationGradient1

rotationGradient2

I appreciate any kind of help! Thank you very much.

CodePudding user response：

Instead of using a mask, you could use background-clip: text and then transition your background position (you'll have to change your background so it matches what you want better):

.box {
  aspect-ratio: 1/1;          /* use this instead of psuedo element to make square */
  font-weight: bold;          /* you can change the font style as you please */
  font-size: 125px;
  color: blue;
  display: inline-flex;       /* used flex so we can centre the text */
  justify-content: center;
  align-items: center;
  width: 200px;
  background: #9b59b6;
  background: 
    radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 5%, rgba(64, 188, 255, 1) 20%, rgba(4, 15, 51, 0.5) 40%) -30px -30px,
    radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 5%, rgba(64, 188, 255, 1) 20%, rgba(4, 15, 51, 0.9) 40%) 40px 40px;
  text-fill-color: transparent;                 /* the following 2 styles and their webkit equivalents are to add the radial background to the text */
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transition: background-position 1s ease; 
}

.box:hover {
  background-position: 65px -15px, 150px 40px;      /* this is for animating the background */
}

<div >2.0</div>

CodePudding user response：

Maybe use background-position to push the gradient around using keyframes?

.box {
  display: inline-block;
  width: 300px;
  aspect-ratio: 1/1;
  -webkit-mask: url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  mask: url(https://media.discordapp.net/attachments/710815377852071976/1065738517101154324/thunder20only100white.png) center/cover;
  background: #9b59b6;
  /*Fallback if gradients don't work */
  background: radial-gradient(ellipse, rgba(255, 255, 255, 1) 0%, rgba(197, 251, 255, 1) 6%, rgba(64, 188, 255, 1) 12%, rgba(4, 15, 51, 1) 28%);
  animation: moveBackground 2s infinite;
  animation-timing-function: linear;
}

@keyframes moveBackground {
  0% {
    background-position: -50px -50px;
  }
  25% {
    background-position: 50px -50px;
  }
  50% {
    background-position: 50px 50px;
  }
  75% {
    background-position: -50px 50px;
  }
  100% {
    background-position: -50px -50px;
  }
}

<div ></div>