Для создания таймера обратного отсчета в CSS можно использовать различные подходы и техники. Одним из самых популярных способов является комбинированное использование CSS и JavaScript. В этом ответе я расскажу о создании простого таймера обратного отсчета с использованием только CSS и HTML, без использования JavaScript.
1. Сначала создаем HTML-структуру для таймера. Нам понадобятся три HTML-элемента: обертка для таймера, элементы для отображения цифр минут и секунд.
<div class="timer-wrapper"> <div class="timer"> <div class="digit" id="minutes">00</div> <div class="digit">:</div> <div class="digit" id="seconds">00</div> </div> </div>
2. Далее необходимо применить стили к нашей HTML-структуре. Мы будем использовать CSS-анимацию и ключевые кадры для создания эффекта обратного отсчета.
.timer-wrapper { display: flex; justify-content: center; align-items: center; height: 100vh; } .timer { display: flex; justify-content: center; align-items: center; font-size: 5rem; } .digit { padding: 0 0.5rem; } @keyframes countdown { 0% { transform: scale(1); } 100% { transform: scale(0.75); } } .timer-wrapper .digit { animation: countdown 1s infinite; } #minutes { animation-delay: 0s; } #seconds { animation-delay: 0.5s; }
3. Теперь к элементам минут и секунд нужно присвоить их значение. Для этого можно использовать атрибуты данных (data-attributes) в HTML-разметке.
<div class="timer-wrapper"> <div class="timer"> <div class="digit" data-time="01" id="minutes">01</div> <div class="digit">:</div> <div class="digit" data-time="59" id="seconds">59</div> </div> </div>
4. Для того чтобы таймер обратного отсчета работал, необходимо добавить анимацию при переключении значений в CSS. Мы будем использовать CSS-переменные и вероятность того, что время уменьшится с каждым «кадром» (цифрой), чтобы создать эффект обратного отсчета.
@keyframes countdown { 0% { transform: scale(1); --time: attr(data-time); } 100% { transform: scale(0.75); --time: calc(var(--time) - 1); } } #minutes::after, #seconds::after { content: var(--time); }
После применения всех этих шагов, у вас будет простой таймер обратного отсчета, который будет уменьшать значения минут и секунд до 00:00. Этот таймер будет анимированным и будет использовать только CSS и HTML, без необходимости в JavaScript.