Перевод статьи «Amazing Pure HTML and CSS background animations».
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.
Диагональный градиент
See the Pen Diagonal Color Gradients by Alison Quaglia (@hylobates-lar) on CodePen.
Написать такой код легко, а эффект получается очень интересный.
Скольжение диагоналей
See the Pen Sliding Diagonals Background Effect by Chris Smith (@chris22smith) on CodePen.
Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.
Анимированный фон
See the Pen Animation Background || Only Css by Nour Ibram (@nouribram) on CodePen.
Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.
Бесконечный паттерн
See the Pen Pattern Animation (Infinite) by Adam Abundis (@adamabundis) on CodePen.
Отдельное спасибо @keyframes за бесконечную прокрутку!
Прекрасный анимированный бэкграунд
See the Pen Awesome Animated background by beshoy ekram (@beshoooo) on CodePen.
Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.
Анимированный «лесной» фон
See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.
Плавающие квадраты
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Снова диагональные линии
See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen.
Весьма ненавязчиво!
Плывущие облака
See the Pen Floating Cloud Background by Shaw (@shshaw) on CodePen.
Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).
Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.
