359 читали · 1 год назад
Делаем анимацию фона (background) на css
Добрый день. Рассмотрим как просто сделать анимированный градиентный фон на чистом css. В этой статье сделаем градиентный фон и при помощи CSS стилей анимируем плавную смену градиента фона. Делаем простую страничку в HTML, примерно так: <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Тест</h1> </body> На этой странице подключена только таблица стилей и в теге body указан заголовок h1. Далее в файле styles.css вставляем такой текст: body { background: linear-gradient(90deg, rgba(132,128,194,1) 0%, rgba(177,177,218,0...
1 год назад
Анимированный фон на чистом CSS | No JavaScript
В нашем сегодняшнем фрагменте мы создали несколько квадратных элементов разного размера. Затем мы распределили их по экрану просмотра, используя фиксированное положение и значения left. Каждому элементу присваивается отдельное значение задержки анимации, чтобы они анимировались один за другим, а не все сразу. ✅ Скачать: https://boosty.to/monster-tem/posts/085722ce-7f19-4c8c-a067-1b62a0dbe20a С учетом эстетики квадратным фигурам придан эффект свечения, который хорошо смотрится на черном фоне. Затем каждому пространственному или квадратному элементу присваивается общее значение анимации...