CSS transition
19 февраля 2020 CSS
CSS transition — это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В этой статье разберем некоторые примеры, которые скорее всего вам пригодятся в работе.
Всего лишь добавляем к блоку свойство transition: 3s; и смотрим, что получилось:
Содержание
Плавное изменение цвета блока
<div class="block1">Плавное изменение цвета блока</div>
<style>
.block1 {
background: #da4453;
color: #fff;
font-size: 21px;
font-weight: bold;
cursor: pointer;
margin: 50px auto;
width: 500px;
padding: 20px;
text-align: center;
transition: 3s;
}
.block1:hover {
background: #333;
color: #fff;
}
</style>Плавное изменение ширины блока
<div class="block2">Плавное изменение ширины блока</div>
<style>
.block2 {
background: #da4453;
color: #fff;
font-size: 21px;
font-weight: bold;
cursor: pointer;
margin: 50px auto;
width: 500px;
padding: 20px;
text-align: center;
}
.block2:hover {
width: 200px;
transition: 3s;
}
</style>Дополнительные настройки
Общий синтаксис свойства следующий:transition: transition-property transition-duration transition-timing-function transition-delay;
transition-property — список свойств, на которые распространяется трансформация, например backgroundtransition-duration — время, в течении которого происходит трансформацияtransition-timing-function — замедление, ускорение и другие временные эффекты. Может быть ease, linear, ease-in, ease-out, ease-in-out, step-start, step-endtransition-delay — задержка, после которой начинается трансформация
Дополнительные свойства можно записать как отдельно, так и прямо в строку, например так:
transition: background-color 3s linear 3s;
Плавное вращение блока
<div class="block3">Плавное вращение блока</div>
<style>
.block3 {
background: #da4453;
color: #fff;
font-size: 21px;
font-weight: bold;
cursor: pointer;
margin: 50px auto;
width: 500px;
padding: 20px;
text-align: center;
transition: 3s linear;
}
.block3:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>Плавное изменение прозрачности блока
<style>
.block4 {
background: #da4453;
color: #fff;
font-size: 21px;
font-weight: bold;
cursor: pointer;
margin: 50px auto;
width: 500px;
padding: 20px;
text-align: center;
transition: 3s linear;
}
.block4:hover {
opacity: 0.1;
}
</style>
Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
Flexbox - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее
Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее
LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Добавить комментарий