Как создать анимацию границы с помощью CSS?
CSS-анимация границы с использованием наведения используется для создания анимации границы при наведении курсора на текст. Понятия, которые мы собираемся использовать, - это селекторы до, после и при наведении курсора. Настоятельно рекомендуется просмотреть все эти селекторы, прежде чем двигаться дальше в этой статье.
Подход: подход этой анимации состоит в том, чтобы разделить анимацию на две части. Верхний и правый угол будут выполняться одновременно с использованием до, нижний и левый - одновременно с использованием селектора после.
HTML-код: мы создали HTML-файл и создали в нем div с h1 внутри div. Ниже приведен код того же.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title >GeeksforGeeks</ title > </ head > < body > < div class = "geeks" > < h1 >GeeksforGeeks</ h1 > </ div > </ body > </ html > |
Код CSS: CSS для этой анимации немного сложен, поэтому давайте попробуем разобраться в нем шаг за шагом.
Шаг 1: Первое, что мы сделали, это предоставили базовый фон и выровняли текст по центру. Ниже приведен код того же.
body { margin : 0 ; padding : 0 ; background : green ; } .geeks { left : 40% ; top : 40% ; position : absolute ; width : 300px ; text-align : center ; } h 1 { position : relative ; } |
Шаг 2: Второй шаг - создание верхней и правой границы.
- Первым делом нужно создать границу с прозрачным фоном.
- Затем анимируйте его при наведении курсора, дав ему линейную анимацию и имя идентификатора как animate.
- Теперь, используя ключевые кадры, мы будем анимировать границу. Убедитесь, что вы применили цвет только к верхней и правой стороне границы. Во-первых, мы увеличили ширину анимации верхней границы и высоту анимации правой границы.
.geeks::before { content : "" ; position : absolute ; top : -2px ; left : -2px ; width : 0 ; height : 0 ; background : transparent ; border : 2px solid transparent ; } .geeks:hover::before { animation: animate 1 s linear forwards; } @keyframes animate { 0% { width : 0 ; height : 0 ; border-top-color : black ; border-right-color : transparent ; border-bottom-color : transparent ; border-left-color : transparent ; } 50% { width : 100% ; height : 0 ; border-top-color : black ; border-right-color : black ; border-bottom-color : transparent ; border-left-color : transparent ; } 100% { width : 100% ; height : 100% ; border-top-color : black ; border-right-color : black ; border-bottom-color : transparent ; border-left-color : transparent ; } } |
Шаг 3: Повторите шаг 2 с помощью селектора after. Вот некоторые ключевые моменты, которые следует помнить на этом этапе:
- Убедитесь, что верх и правый край прозрачны, а левый и нижний - как цветные.
- Слева высота увеличится, а ширина дна увеличится.
- Обязательно используйте на этом этапе другое имя для идентификатора ключевых кадров.
.geeks::after { content : "" ; position : absolute ; top : -2px ; left : -2px ; width : 0 ; height : 0 ; background : transparent ; border : 2px solid transparent ; } .geeks:hover::after { animation: animates s linear forwards; 1 } @keyframes animates { 0% { width : 0 ; height : 0 ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : transparent ; border-left-color : black ; } 50% { width : 0 ; height : 100% ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : black ; border-left-color : black ; } 100% { width : 100% ; height : 100% ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : black ; border-left-color : black ; } } |
Полный код CSS:
<style> body { margin : 0 ; padding : 0 ; background : green ; } .geeks { left : 40% ; top : 40% ; position : absolute ; width : 300px ; text-align : center ; } h 1 { position : relative ; } .geeks::before { content : "" ; position : absolute ; top : -2px ; left : -2px ; width : 0 ; height : 0 ; background : transparent ; border : 2px solid transparent ; } .geeks:hover::before { animation: animate 1 s linear forwards; } @keyframes animate { 0% { width : 0 ; height : 0 ; border-top-color : black ; border-right-color : transparent ; border-bottom-color : transparent ; border-left-color : transparent ; } 50% { width : 100% ; height : 0 ; border-top-color : black ; border-right-color : black ; border-bottom-color : transparent ; border-left-color : transparent ; } 100% { width : 100% ; height : 100% ; border-top-color : black ; border-right-color : black ; border-bottom-color : transparent ; border-left-color : transparent ; } } .geeks::after { content : "" ; position : absolute ; top : -2px ; left : -2px ; width : 0 ; height : 0 ; background : transparent ; border : 2px solid transparent ; } .geeks:hover::after { animation: animates s linear forwards; 1 } @keyframes animates { 0% { width : 0 ; height : 0 ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : transparent ; border-left-color : black ; } 50% { width : 0 ; height : 100% ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : black ; border-left-color : black ; } 100% { width : 100% ; height : 100% ; border-top-color : transparent ; border-right-color : transparent ; border-bottom-color : black ; border-left-color : black ; } } </style> |
Полный код: это комбинация кодов HTML и CSS.
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < title >GeeksforGeeks</ title > < style > body { margin: 0; padding: 0; background: green; } .geeks { left: 40%; top: 40%; position: absolute; width: 300px; text-align: center; } h1 { position: relative; } .geeks::before { content: ""; position: absolute; top: -2px; left: -2px; width: 0; height: 0; background: transparent; border: 2px solid transparent; } .geeks:hover::before { animation: animate 1s linear forwards; } @keyframes animate { 0% { width: 0; height: 0; border-top-color: black; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; } 50% { width: 100%; height: 0; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent; } 100% { width: 100%; height: 100%; border-top-color: black; border-right-color: black; border-bottom-color: transparent; border-left-color: transparent; } } .geeks::after { content: ""; position: absolute; top: -2px; left: -2px; width: 0; height: 0; background: transparent; border: 2px solid transparent; } .geeks:hover::after { animation: animates 1s linear forwards; } @keyframes animates { 0% { width: 0; height: 0; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: black; } 50% { width: 0; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; } 100% { width: 100%; height: 100%; border-top-color: transparent; border-right-color: transparent; border-bottom-color: black; border-left-color: black; } } </ style > </ head > < body > < div class = "geeks" > < h1 >GeeksforGeeks</ h1 > </ div > </ body > </ html > |
Выход: