Как сделать красивый эффект при наведении с помощью CSS
Как сделать красивый эффект при наведении с помощью CSS | MediumАнимация перехода в CSS (каскадные таблицы стилей) для подпитки ваших HTML-компонентов 014 свойств. В любом проекте веб-разработки веб-сайта, который у вас есть, у вас всегда есть части, которые вы хотите, чтобы они были красивыми или хорошо выглядящими
анимация и переход эффекты. Photo by Tyler Lastovich on UnsplashCSS Transition всегда было интересно использовать для придания веб-страницам крутого и привлекательного вида. Любые компоненты вашего веб-сайта, такие как кнопки , ссылки , карточки или , могут иметь анимационные эффекты.
Есть несколько свойств перехода CSS, которые могут сделать ваш сайт крутым. Переход может принимать практически другие свойства CSS, которые вы хотите анимировать, такие как непрозрачность, цвет фона, преобразование и другие свойства.
Смотрите этот отличный пояснительный пост от Сара Коуп о Transition Свойства.
Я расскажу вам о двух вещах, которые я хочу ввести в анимацию переходов. Кнопки и Карточки — популярные HTML-компоненты, которые широко используются на веб-сайтах.
1. КнопкиМы можем начать с написания кнопок HTML на холсте. Вы можете использовать свой собственный стиль CSS для проектов или использовать структуру CSS, которая вам нравится. Я использую Bootstrap 4 для этого случая.
Настройка HTML:
Теги HTML для анимации и переходовНастройка SCSS:
Фрагменты кода анимации и переходов SCSS КарточкиПрежде всего, мы используем карты Bootstrap по умолчанию и расширяем анимацию перехода CSS поверх нее, и, наконец, мы добавляем новую анимацию перехода.
The Cards SCSS:
SCSS для анимации и переходов на HTML-тегах CardsThe Cards HTML:
HTML-теги Cards с анимацией и переходами Мы можем продолжить анимацию переходов на карточках с элементами псевдокласса ::before .
Использование свойства before для анимации с преобразованием и переходом:
SCSS:
Использование свойства css ::before для анимации и переходов в HTML-тегахHTML:
Теги HTML-карт с использованием CSS ::before для анимации и переходов CSS-анимация и эффекты перехода примут начало наведения мыши и выхода из карточек. Плавный переход можно изменить в свойстве CSS transition . Чем больше вы изменяете свойства перехода анимации CSS, тем лучше вы понимаете, как работает эффект.
И, наконец, мы могли бы использовать некоторые модификации для анимации карт с помощью преобразования CSS перспектива свойство:
SCSS :
SCSS Преобразование карточек при CSS-анимации и переходеРезультат перспективного перехода CSS-анимацияCodePen на карточках перспективная анимация перехода Спасибо, что заглянули.
Это одна из моих серий о SCSS с Bootstrap и удачного кодирования!
Ссылки:
https://sass-lang.com/
Сара Коуп — https://css-tricks.com/almanac/properties/t/transition/
Читайте также:
OnLine и OffLine Detection API веб-навигатора с использованием VueJS
API навигатора веб-браузера, который представляет текущее состояние интернет-соединения пользовательского агента с использованием VueJS.
code-road.medium.com
Рассмотрите эти 11 полезных модулей в вашем Nuxt.js
Nuxt.js — это привлекательная платформа Vue.js с большой поддержкой сообщества.
medium.com
Как изменить версию Node.js между проектами с помощью NVM
Управление несколькими проектами с разными версиями Node на вашем компьютере
Пожалуйста, следуйте за мной, чтобы получить больше советов и рекомендаций по веб-разработке, спасибо!
Присоединяйтесь к Medium по моей реферальной ссылке — Code Road
Прочитайте все истории Code Road (и тысячи других авторов на Medium).
Ваш членский взнос напрямую поддерживает Code…code-road.medium.com
Css Animation
Transitions
Animate
Bootstrap 4
Автор Code Road
9 0005176 подписчиков
Я пишу на такие темы, как NuxtJS, NextJS, GraphQL, Laravel, TailwindCSS, Bootstrap, SEO, Headless CMS, Fullstack и веб-разработка.
Еще от Code Road
Code Road
в
Лучшее программирование
Как изменить версию Node.js между проектами с использованием NVM
Управление несколькими проектами с различными версиями Node на вашем компьютере
·Чтение через 6 мин·21 августа 2020 г. 06JWT (веб-токены JSON) Аутентификация пользователя в веб-приложении Next.js
Практическое руководство по JWT (веб-токенам JSON) аутентификации в приложении Next.js.
·4 мин чтения·7 сентября 2020 г.Code Road
Контейнер MySQL Docker с MySQL Workbench и PhpMyAdmin
Подключение базы данных MySQL в контейнере Docker с помощью MySQL Workbench и phpMyAdmin для администрирования баз данных
Chart.
js в Nuxt.js: как реализовать