ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект анимации границ для блока на CSS

Эффект анимации границ для блока на CSS

Вашему вниманию интересное решение, как стиль анимации границ окна содержимого, что производится при наведении курсора, и работает на чистом CSS. Безусловно вы такой эффект встречали или видели раньше, эффекты анимации границы окна содержимого при наведении курсора на некоторых веб-страницах. В основном эти типы кнопок используются в эффектах анимации границы окна содержимого при наведении курсора. Ведь по своему формату, такой стиль анимации можно задействовать при создание каркаса, как пример, это кнопка, что также показывает, только в небольших параметрах.

Здесь же мы изначально выставляем блок под описание или видео с картинками, а сама анимация идет как красивое дополнение, что многих удивит. Также можно понять, что если мы выстраиваем на темном формате сайта, то на нем ярче смотрится, но здесь уже идет под интерес. Главным считаю, это простата в создание анимации, что производится одновременно со всех сторон. Сам эффект проверен, где самостоятельно можете все изначально посмотреть, для этого ниже предоставлена demo страница с картинкой, где наведен клик на основу.

При проверки на работоспособность:

Анимация границы окна при наведении на CSS

Установка:

HTML

Код

<div class="kegasitem-amulokan">
  <div class="adekipos-limegas">
  <div class="line line-top">
  <span></span>
  </div>
  <div class="line line-right">
  <span></span>
  </div>
  <div class="line line-bottom">
  <span></span>
  </div>
  <div class="line line-left">
  <span></span>
  </div>
  <div class="item">
  <h2>
<span class="title">ZORNET.RU</span></h2>
  <p>В условиях изоляции и ограничений на поездки люди обращались к развлекательным веб-сайтам и коммуникационным платформам, чтобы развлечься и получить образование. Данные YouTube показывают, что определенные жанры видео получили непропорционально большое количество просмотров после марта 2020 года.</p>
  </div>
  </div>
  </div>

CSS

Код

.kegasitem-amulokan {
  background-color: #fff;
  max-width: 960px;
  box-sizing: border-box;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 10px 10px 70px rgba(255,255,255,0.5);
}
.adekipos-limegas {
  background-color: #fff;
  width: 400px;
  position: relative;
  overflow: hidden;
  margin: auto;
  padding: 4px;
}

.adekipos-limegas .line {
  background-color: #6c63ff;
  position: absolute;
}

.adekipos-limegas .line span {
  background-color: #e3e3e3;
  position: inherit;
  display: block;
  transition: all 0.4s ease-out;
}
.adekipos-limegas .line-top{
  top: 0;
  left: 0;
  width:100%;
  height:4px;
}
.adekipos-limegas .line-right{
  top: 0;
  right: 0;
  width:4px;
  height:100%;
}
.adekipos-limegas .line-bottom{
  right: 0;
  bottom: 0;
  width:100%;
  height:4px;
}
.adekipos-limegas .line-left {
  left: 0;
  bottom: 0;
  width: 4px;
  height: 100%;
}
.adekipos-limegas .line-top span{
  top:inherit;
  left:inherit;
  width:0;
  height:100%;
}
.adekipos-limegas .line-right span{
  top:inherit;
  right:inherit;
  width:100%;
  height:0;
}
.adekipos-limegas .line-bottom span{
  right:inherit;
  bottom:inherit;
  width:0;
  height:100%;
}
.adekipos-limegas .line-left span {
  left: inherit;
  bottom: inherit;
  width: 100%;
  height: 0;
}
.adekipos-limegas:hover .line-top span,
.adekipos-limegas:hover .line-bottom span{
  width:100%;
}
.adekipos-limegas:hover .line-left span,
.adekipos-limegas:hover .line-right span{
  height:100%;
}
.adekipos-limegas > .item{
  padding:40px 30px;
  text-transform: uppercase;
  text-align: justify;
}
.adekipos-limegas > .item > h2{
  font-size: 36px;
  line-height: 10px;
}
.adekipos-limegas > .item > h2 .title{
  color:#6c63ff;
  font-weight: 800;
}
.adekipos-limegas > .item > p{
  padding:30px 0;
  font-size: 12px;
  line-height: 20px;
}

Если вы новичок, вы можете использовать этот потрясающий дизайн в своем проекте и на веб-сайтах. Где можно разместить описание, а также изображение, что при наведение появится стильная анимация.

Демонстрация

15 Марта 2021 Загрузок: 4 Просмотров: 1135 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0