Современная анимация в CSS: градиентный текст, linear(), @view-transitions и popover - CSS Talk #4
Делаем анимацию фона (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...
Делаем красивую градиент кнопку с анимацией при наведении
Данную привлекательную кнопку сделать очень легко и просто. Для начала создаем файл index.html и style.css прописываем оболочку htmlю Заголовок я назвал Gradient button, вы можете по-своему далее при помощи тега <a> мы создаём ссылку на которую вас будет перебрасывать после нажатия на кнопку, в ней создаём класс (я назвал его button) , между тегов прописываем наш текст, который отобразится на кнопке далее переходим к нашему css файлу в body прописываем display - flex, затем с помощью justify-content...