363 читали · 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...
06:44
1,0×
00:00/06:44
393,4 тыс смотрели · 4 года назад
2 года назад
Классные эффекты наведения, использующие свойство Background. Часть 1
Некоторое время назад Джефф написал статью о классном эффекте наведения. Эффект основан на комбинации псевдоэлементов CSS, преобразований и переходов. Множество комментариев показали, что тот же эффект можно добиться, используя свойства фона. Джефф упомянул, что это была его первоначальная мысль, и я тоже об этом думал. Я не говорю, что псевдоэлемент, на котором он остановился, плох, но знание различных методов для достижения того же эффекта может быть только хорошим. В этом посте мы переработаем...