Подскажите как сделать что-то подобное в css и js. Как сделать такую тень. Хочу чтобы эта "тень" двигалась. Спасибо
-
Каким образом двигалась?– Laukhin Andrey4 авг 2022 в 11:30
-
Хочу, чтобы тень пульсировала.– Olga4 авг 2022 в 11:52
-
@Olga, пульсацию можно сделать через анимацию tranform scale, по крайней мере, если она должна быть для всей тени, а не частями. А саму тень - ничего лучше svg или картинки тут не выйдет, скорее всего.– Qwertiy ♦4 авг 2022 в 12:01
-
Спасибо, буду пробовать.– Olga4 авг 2022 в 12:22
Добавить комментарий
|
1 ответ
можно и без участия 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="">
прочитать о свойствах подробнее можно тут: анимация и трансформация
-
Спасибо. Как можно сделать пульсацию? Не хотела добавлять картинку. Хочу сделать только пульсирующий контур, который будет пустой внутри.– Olga4 авг 2022 в 11:51
-
вместо transform: rotate(360deg) используйте transform: scale(1.1, 1.1) - в скобках указаны величины, на которые ваше изображение будет увеличиваться, можете изменить на свои. И продолжительность цикла можно уменьшить до 2s 4 авг 2022 в 11:58
-
-
@TaniaLinn так будет менять только в одну сторону, в итоге плавной анимации не видать.– ΝNL9934 авг 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); }}" 4 авг 2022 в 12:46