Создайте веб-страницу, на которой бесконечно крутится стрелка, как это показано на видео ниже.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Стрелка</title>
<style>
:root {
--d: 100px; /* Диаметр окружности */
--c1: #ef3f6b; /* Цвет окружности */
--c2: #009bd2; /* Цвет стрелки */
--b: 10px; /* Толщина окружности */
--a: 14px; /* Толщина стрелки */
}
.timer {
position: absolute; /* Абсолютное позиционирование */
width: var(--d); height: var(--d); /* Размеры */
left: 50%; top: 50%; /* Выравниваем по центру */
transform: translate(-50%, -50%); /* Смещаем на половину размера */
border: var(--b) solid var(--c1); /* Параметры рамки */
border-radius: 50%; /* Делаем окружность */
}
.timer::after {
content: '';
position: absolute; /* Позиционирование относительно родителя */
width: calc(var(--d)/2); height: var(--a); /* Размеры стрелки */
left: calc((var(--d) - var(--a)) / 2); /* Положение от левого края */
top: calc((var(--d) - var(--a)) / 2 ); /* Положение от верхнего края */
background-color: var(--c2); /* Цвет стрелки */
border-radius: var(--a); /* Скругляем уголки */
transform-origin: calc(var(--a) / 2) calc(var(--a) / 2); /* Точка вращения */
animation: rotate 4s infinite ease-in; /* Параметры анимации */
}
@keyframes rotate {
0%, 5% { transform: rotate(0deg); }
25%, 30% { transform: rotate(90deg); }
50%, 55% { transform: rotate(180deg); }
75%, 80% { transform: rotate(270deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="timer"></div>
</body>
</html>