Для создания анимации свечения блоков, подобной той, которая используется на веб-сайте dapradar, можно использовать комбинацию различных CSS свойств и ключевых кадров (keyframes).
Вот шаги, которые нужно выполнить, чтобы создать такую анимацию:
1. Создайте контейнер с блоками, которые будут светиться. Например, создайте <div> элемент с классом "glow-container".
<div class="glow-container"> <div class="glow-block"></div> <div class="glow-block"></div> <!-- Добавьте другие блоки --> </div>
2. Добавьте стили для контейнера и блоков. Установите ширину, высоту и другие свойства по вашему усмотрению. Например:
.glow-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
background-color: #000;
}
.glow-block {
width: 50px;
height: 50px;
background-color: #fff;
animation: glow 1s infinite;
}
3. Определите анимацию "glow" с помощью ключевых кадров, где будет указано, какие стили должны применяться на каждом этапе анимации. Например:
@keyframes glow {
50% {
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.3);
}
100% {
box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0);
}
}
В приведенном выше примере, на 50% времени анимации будет применяться свойство "box-shadow" с заданным значением, создающее эффект свечения. На 100% времени анимации свойство "box-shadow" будет иметь значение 0, чтобы блок возвращался к своему первоначальному состоянию.
4. Запустите анимацию на блоках, добавив атрибут "animation" со значением "glow" к классу "glow-block".
Теперь, когда вы применили все эти шаги, блоки в вашем контейнере должны начать светиться, используя анимацию, похожую на ту, которая используется на dapradar. Вы можете изменить параметры анимации (например, продолжительность, цвет свечения и т.д.) и настроить их под свои потребности.