Border animation in CSS -Part 1
Border animation in CSS
/*CSS*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #8bc34a;
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.border-anim{
width: 400px;
height: 600px;
background: #ffc107;
position: relative;
}
.border-anim::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 15%;
height: 10%;
border-top: 3px solid #FFF;
border-left: 3px solid #FFF;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.border-anim::after{
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 15%;
height: 10%;
border-bottom: 3px solid #FFF;
border-right: 3px solid #FFF;
transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
}
.border-anim:hover::before, .border-anim:hover::after{
width: 99%;
height: 99%;
}
Смотрите видео Border animation in CSS -Part 1 онлайн, длительностью часов минут секунд в хорошем качестве, которое загружено на канал Masters In Web Design 18 Декабрь 2021. Делитесь ссылкой на видео в социальных сетях, чтобы ваши подписчики и друзья так же посмотрели это видео. Данный видеоклип посмотрели 11 раз и оно понравилось 2 посетителям.
