如何围绕文本旋转框阴影？

Question

我正在研究HTML/CSS，我发现了一个旋转框阴影的非常有趣的例子。我想我会尝试使用它，但我无法围绕我的文本旋转阴影。

我找到的例子有一个像 <div class="rotate-shadows"></div> 和 CSS 这样的：

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.rotate-shadows {
  width: 220px;
  height: 220px;
  position: relative;
}
.rotate-shadows:after,
.rotate-shadows:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}
.rotate-shadows:before {
  box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
  animation: rotate-before 2s -0.5s linear infinite;
}
.rotate-shadows:after {
  box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
  animation: rotate-after 2s -0.5s linear infinite;
}
@keyframes rotate-after {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);}
  100% {transform: rotateZ(360deg) scaleX(1) scaleY(1);}
}
@keyframes rotate-before {
  0% {transform: rotateZ(0deg) scaleX(1) scaleY(1);}
  50% {transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);}
  100% {transform: rotateZ(-360deg) scaleX(1) scaleY(1);}
}

<div class="rotate-shadows"></div>

我发现我不需要 body {}，知道在哪里可以更改阴影的颜色、比例等。但是我不知道哪个部分负责形状阴影。

我可以让阴影像动画帧一样环绕我的文字吗：

Классная шляпная шляпа с широкими полями всего за два куська. Да-да! Это не опечатка! Всего два динозаврических укуса и шляпа ваша!

我需要将文本放在哪里才能让阴影围绕它旋转？我怎样才能改变阴影的形状？

我就是想明白

Answer 1

如果我没有正确理解您的要求，这是您需要的吗？

I added an extra div inside to wrap the text if that is not an issue? this div acts based on the parent's position. making it in the middle.

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
}

.rotate-shadows {
  width: 220px;
  height: 220px;
  position: relative;
}

#text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
}

.rotate-shadows:after,
.rotate-shadows:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.rotate-shadows:before {
  box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
  animation: rotate-before 2s -0.5s linear infinite;
}

.rotate-shadows:after {
  box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
  animation: rotate-after 2s -0.5s linear infinite;
}

@keyframes rotate-after {
  0% {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}

@keyframes rotate-before {
  0% {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}

<div class="rotate-shadows">
  <div id="text">
    Once upon a time in Whosebug!!
  </div>
</div>

如果您需要单曲中的内容Div那么：

body {
  height: 100vh;
}

.rotate-shadows {
  width: 220px;
  height: 220px;
  position: absolute;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  display: flex;
  text-align: center;
  vertical-align: middle;
  top: 50%;
  left: 50%;
}

.rotate-shadows:after,
.rotate-shadows:before {
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
}

.rotate-shadows:before {
  box-shadow: inset 0 20px 0 rgba(0, 250, 250, 0.6), inset 20px 0 0 rgba(0, 200, 200, 0.6), inset 0 -20px 0 rgba(0, 150, 200, 0.6), inset -20px 0 0 rgba(0, 200, 250, 0.6);
  animation: rotate-before 2s -0.5s linear infinite;
}

.rotate-shadows:after {
  box-shadow: inset 0 20px 0 rgba(250, 250, 0, 0.6), inset 20px 0 0 rgba(250, 200, 0, 0.6), inset 0 -20px 0 rgba(250, 150, 0, 0.6), inset -20px 0 0 rgba(250, 100, 0, 0.6);
  animation: rotate-after 2s -0.5s linear infinite;
}

@keyframes rotate-after {
  0% {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95);
  }
  100% {
    transform: rotateZ(360deg) scaleX(1) scaleY(1);
  }
}

@keyframes rotate-before {
  0% {
    transform: rotateZ(0deg) scaleX(1) scaleY(1);
  }
  50% {
    transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85);
  }
  100% {
    transform: rotateZ(-360deg) scaleX(1) scaleY(1);
  }
}

<div class="rotate-shadows"> Once upon a time in Whosebug!!
</div>

如何围绕文本旋转框阴影？

How to rotate box shadow around a text?

html

css

css-animations

box-shadow