Анимация вращающегося шара с эффектом свечения с использованием CSS
Опубликовано: 27 Августа, 2022
Анимацию вращающегося мяча можно легко создать, используя свойство преобразования для вращения мяча. Счетчик итераций анимации применяется как бесконечный, чтобы получить бесконечную анимацию вращения. Для получения эффекта свечения используется box-shadow.
ШАГИ:
- Создайте файл HTML с именем index.html.
- Создайте элемент div в файле index.html и дайте имя класса ball .
- Добавьте стиль к этому имени класса.
- Создайте анимацию с именем spinball, используя правило @keyframes. Используйте свойство преобразования, чтобы вращать мяч.
- Примените 2 комбинации вставки цвета в свойстве box-shadow, чтобы получить светящийся эффект вращения.
- Скорость вращения можно регулировать, изменяя продолжительность анимации.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >Spinning Ball Animation</ title > < style > * { background-color: black; } .ball { height: 40px; width: 40px; border-radius: 100px; position: fixed; top: 50vh; left: 50vw; animation: spinBall 0.13s linear infinite; box-shadow: inset 0 0 18px #fff, inset 6px 0 18px violet, inset -6px 0 18px #0ff, inset 6px 0 30px violet, inset -6px 0 30px #0ff, 0 0 18px #fff, -4px 0 18px violet, 4px 0 18px #0ff; } @keyframes spinBall { 100% { transform: rotate(360deg); } } </ style > </ head > < body > < div class = "ball" ></ div > </ body > </ html > |
Выход: