/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
kinetic-loader/style.css
69 строк
912 B
Brad Traversy
Kinetic loader
16 окт 2020, 23:45
16 окт 2020, 23:45
ab599f9
Код
Авторство
О чём код?
* { box-sizing: border-box; } body { background-color: #2c3e50; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .kinetic { position: relative; height: 80px; width: 80px; } .kinetic::after, .kinetic::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #fff; animation: rotateA 2s linear infinite 0.5s; } .kinetic::before { transform: rotate(90deg); animation: rotateB 2s linear infinite; } @keyframes rotateA { 0%, 25% { transform: rotate(0deg); } 50%, 75% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @keyframes rotateB { 0%, 25% { transform: rotate(90deg); } 50%, 75% { transform: rotate(270deg); } 100% { transform: rotate(450deg); } }