shylov
@shylov
Начинающий

Как скорректировать тень для анимированного объекта?

Во время анимирования элемента - тень движется вместе с изображением . Необходимо что-бы тень оставалась в одном положении .
<html>
            <div class="mbi-inner1">
                <div class="gear" id="gear1"></div>
                <div class="gear" id="gear2"></div>
            </div>
</html>
<style>
@keyframes a-name1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes a-name2 {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.gear {
  text-align: center;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: paused;
  animation-fill-mode: forwards;
}
#gear1 {
  background-image: url(/img/gears2.png);
  background-size: 250px;
  height: 250px;
  width: 250px;
  animation-name: a-name1;
  animation-duration: 30s;
  filter: drop-shadow(-10px 0px 2px rgba(0, 0, 0, 0.5));
}
#gear2 {
  position: absolute;
  top: -7px;
  right: -118px;
  background-image: url(/img/gears3.png);
  background-size: 180px;
  height: 180px;
  width: 180px;
  animation-name: a-name2;
  animation-duration: 30s;
  filter: drop-shadow(-8px 0px 1px rgba(0, 0, 0, 0.5));
  z-index: -1;
}
.mbi-inner1:hover .gear {
  animation-play-state: running;
  cursor: pointer;
}
</style>

602a887c215ea733561229.jpeg
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
07 мар. 2021, в 18:25
35000 руб./за проект
07 мар. 2021, в 18:22
5000 руб./за проект
07 мар. 2021, в 17:45
9000 руб./за проект