1,0×
00:00/00:15
Описание
Простая анимация фигур HTML + CSS
4 месяца назад • 17 просмотров1 поставил "Нравится"
Добрый день. В этой статье расскажу как быстро и просто оживить свой сайт, создать простую анимацию.Итак, начнем. Для начала делаем простой квадрат с фоном:
Это пишем в нашем файле index.html или index.php
<div class="test"></div>
И добавляем стили к нашему блоку div с классом test.
width: 100px
height: 100px;
transform: perspective(500px) rotateY(-15deg) rotateX(8deg) rotateZ(-1deg);
background: gray;
animation: dvij 7s ease infinite;
Добавили последней строкой к блоку анимацию с названием, длительностью, и которая будет выполнятся бесконечно.
Теперь нужно создать эту анимацию с названием dvij.
Чуть ниже в файле стилей прописываем саму анимацию:
@keyframes dvij {
0% {
top: 10px;
}
50% {
top: 40px;
}
100% {
top: 10px;
}
}
С течением времени наш квадрат будет смещаться по оси y с 10 до 40 пикселей и обратно. Тут можете пофантазировать, можно менять цвет, делать повороты, смещать блоки и т.д.