/
githubmirror
/
50projects50days
Обзор
Документация
Войти
/
githubmirror
/
50projects50days
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
scroll-animation/style.css
47 строк
793 B
Brad Traversy
Scroll animation
13 ноя 2020, 18:23
13 ноя 2020, 18:23
f115c80
Код
Авторство
О чём код?
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #efedd6; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: steelblue; color: #fff; display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; margin: 10px; border-radius: 10px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); transform: translateX(400%); transition: transform 0.4s ease; } .box:nth-of-type(even) { transform: translateX(-400%); } .box.show { transform: translateX(0); } .box h2 { font-size: 45px; }