1

Подскажите как сделать что-то подобное в css и js. Как сделать такую тень. Хочу чтобы эта "тень" двигалась. Спасибовведите сюда описание изображения

4
  • Каким образом двигалась? 4 авг 2022 в 11:30
  • Хочу, чтобы тень пульсировала.
    – Olga
    4 авг 2022 в 11:52
  • @Olga, пульсацию можно сделать через анимацию tranform scale, по крайней мере, если она должна быть для всей тени, а не частями. А саму тень - ничего лучше svg или картинки тут не выйдет, скорее всего.
    – Qwertiy
    4 авг 2022 в 12:01
  • Спасибо, буду пробовать.
    – Olga
    4 авг 2022 в 12:22

1 ответ 1

0

можно и без участия js сделать, на одном css. Берем нужное изображение (в вашем случае картинку "тени") и прописываем для него в css анимацию вращения (если вам нужно именно вращать):

.circle {
  width: 200px;
  animation: circle-rotation 60s infinite linear;
}
@keyframes circle-rotation {
  100% { transform: rotate(360deg); } 
}
<img class="circle" src="https://svgx.ru/svg/34139.svg" alt="">

прочитать о свойствах подробнее можно тут: анимация и трансформация

6
  • Спасибо. Как можно сделать пульсацию? Не хотела добавлять картинку. Хочу сделать только пульсирующий контур, который будет пустой внутри.
    – Olga
    4 авг 2022 в 11:51
  • вместо transform: rotate(360deg) используйте transform: scale(1.1, 1.1) - в скобках указаны величины, на которые ваше изображение будет увеличиваться, можете изменить на свои. И продолжительность цикла можно уменьшить до 2s
    – TaniaLinn
    4 авг 2022 в 11:58
  • Спасибо Вам за помощь.
    – Olga
    4 авг 2022 в 11:59
  • @TaniaLinn так будет менять только в одну сторону, в итоге плавной анимации не видать.
    – ΝNL993
    4 авг 2022 в 12:36
  • @ΝNL993 для плавной анимации можно настроить несколько шагов внутри keyframes, указывая изменения хоть для каждого 1%: "@keyframes circle-rotation {30% { transform: scale(0.9, 0.9); } 50% { transform: scale(1, 1); } 70% { transform: scale(1.1, 1.1); } 100% { transform: scale(1, 1); }}"
    – TaniaLinn
    4 авг 2022 в 12:46

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.