Как повернуть рамку тени вокруг текста? - PullRequest
Новая
       35

Как повернуть рамку тени вокруг текста?

1 голос
/ 31 марта 2020

Я изучаю 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 {}, выяснил, где можно изменить цвет теней, масштаб и т. Д. c. Но я не могу понять, какая часть отвечает за форму теней.

Могу ли я сделать тени go вокруг моего текста в виде анимированной рамки:

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

Куда мне нужно поместить текст, чтобы вокруг него вращались тени? И как я могу изменить форму теней?

Я просто хочу понять.

1 Ответ

1 голос
/ 31 марта 2020

Если я правильно понял ваше требование, это то, что вам нужно?

Я добавил дополнительный div внутрь, чтобы обернуть text, если это не проблема? этот div действует в зависимости от позиции родителя. делая это в середине. 

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 Stackoverflow!!
  </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 Stackoverflow!!
</div>
...