Question

我有以下法典:

<><><><>>><>>>>><>>>>>>

<header class="hero">
  <section class="hero-text-container">
    <!--Content Here-->
  </section>

  <figure class="hero-figure">
    <!--Image Here-->
  </figure>
</header>

<>CSS

.hero {
  background-image: radial-gradient(ellipse 30% 100% at -4% 5%, #ce0058, transparent),
    radial-gradient(ellipse 100% 75% at 0% 0%, #cf4520, #460702, transparent),
    radial-gradient(ellipse 100% 100% at 100% 100%, black, black);

  display: flex;
  width: 100%;
  max-width: 100vw;
  justify-content: center;
  align-items: stretch;
  text-align: justify;
  flex-wrap: wrap;
  margin: 0 auto;
  border-bottom: 2px solid #eee;

  animation-name: colors-circulating;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

我删除了用于缩短的超文本代码,但已经执行。

The CSS above is styling the div with a black bg, and a 2 radial gradients of brick brown & hot pink. The gradients are located originally near the div s top left corner. See the full Implementation here:Hero Banner of a website I m working on

I want to animate the gradients to move clockwise from the top left => top right => bottom right => bottom left, so I wrote this code:

@keyframes colors-circulating {
  0%, 100% {
    background: radial-gradient(
        ellipse 30% 100% at -4% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  25% {
    background: radial-gradient(
        ellipse 30% 100% at 96% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  50% {
    background-image: radial-gradient(
        ellipse 30% 100% at 96% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  75% {
    background-image: radial-gradient(
        ellipse 30% 100% at -4% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }
  }

现在的问题是,这部法典显示4幅不平稳的图像。我如何使梯度顺利流动?

我看到了以下解决办法,但不幸的是,它们都没有为我工作:

我知道,我的执行可能不够正确,但我确实竭尽全力。

我如何运用上文用安全支助和办公室解释的理念一?

Answer 1

实现这一目标最容易的方法是在固定集装箱内 two两个元素,一个装有你的内容,另一个是背景。完全置身于其中的两人,这样他们就会打脚,把ron锁定在具有透明背景的更高的z-index上。绕过了背景并抵消了背景,因此,玉米胜出,隐藏着集装箱的溢出,然后才轮到整个背景。

传真

<div class="contain">
  <div class="front">With all your text etc</div>
  <div class="rear"></div>
</div>

CSS

.contain {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.contain > div {
  position: absolute;
}

div.front {
  width: 80px;
  height: 80px;
  background: transparent;
  z-index: 1;
  border: solid 2px blue;
}

div.rear {
  width: 200px;
  left: -50px;
  top: -50px;
  height: 200px;
  background-image: radial-gradient(at bottom left, blue, red);
  border: red solid 2px;
  animation: spin 10s linear infinite;

}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Demo:

The CSS above is styling the div with a black bg, and a 2 radial gradients of brick brown & hot pink. The gradients are located originally near the div s top left corner. See the full Implementation here:Hero Banner of a website I m working on

I want to animate the gradients to move clockwise from the top left => top right => bottom right => bottom left, so I wrote this code:

友情链接