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

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

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

Есть десятки способов достижения анимации в сети, то здесь больше идет под оформление элементов, где появляется при наведении курсора. По большей части мы просто пользуемся преимуществами недавних улучшений в производительности браузера, графических процессоров и спецификации CSS3.

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

Вариант #1

Здесь присутствует рамка, где идет бегущие полоски, где блок имеет заданную ширину и высоту по вашему усмотрению.

Border Transitions - анимация рамки на CSS

HTML

Код

<div class="oformleniya-bordyurov-zr">
<div class="oformleniya-bordyurov">Рамка 1</div>
</div>

CSS

Код

.oformleniya-bordyurov-zr {
  width: 215px;
  height: 215px;
  box-sizing: border-box;
  padding: 15px;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
.oformleniya-bordyurov-zr .oformleniya-bordyurov {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'Roboto Condensed', sans-serif;
}
.oformleniya-bordyurov-zr::before {
  content: '';
  position: absolute;
  width: 148%;
  height: 148%;
  background: repeating-linear-gradient( #f1eded 0%, #f3eeee 7.5px, #a9cce8 7.5px, #a5c9e8 15px, #f3f0f0 15px, #f5f2f2 22.5px, #b1d0ea 22.5px, #aed0ec 30px);
  transform: translateX(-20%) translateY(-20%) rotate(-45deg);
  animation: anim-oformleniya-bordyurov 20s linear infinite;
}
.oformleniya-bordyurov-zr .oformleniya-bordyurov {
  position: relative;
  background-color: #f3eded;
  flex-direction: column;
  box-sizing: border-box;
  padding: 28px;
  text-align: center;
  font-family: sans-serif;
  z-index: 2;
}
.oformleniya-bordyurov-zr, .oformleniya-bordyurov-zr .oformleniya-bordyurov {
  box-shadow: 0 0 2px #94b6d2, 0 0 5px rgba(27, 26, 26, 0.2), inset 0 0 5px rgba(33, 32, 32, 0.2);
  border-radius: 5px;
}
@keyframes anim-oformleniya-bordyurov {
  from {
  background-position: 0;
  }

  to {
  background-position: 0 450px;
  }
}

Цветовая гамма может здесь быть разной, что идет под анимацию.

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

Вариант #2

Этот блок представлен с плавающим бордюром, где присутствует эффект наведение.

HTML

Код

<div class="plavayusim-karkasom">Рамка 2</div>

CSS

Код

.plavayusim-karkasom {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 30px auto;
  width: 215px;
  height: 215px;
  font-size: 25px;
  font-family: 'Roboto Condensed', sans-serif;
  box-shadow: inset 0 0 0 1px #2267a2;
}
.plavayusim-karkasom::before,
.plavayusim-karkasom::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  z-index: -1;
  margin: -5%;
  box-shadow: inset 0 0 0 6px #a7cdec;
  animation: anim-plavayusim-karkasom 8s linear infinite;
}
.plavayusim-karkasom::before {
  animation-delay: -4s;
}
.plavayusim-karkasom:hover::after,
.plavayusim-karkasom:hover::before {
  background-color: #9fc9ec;
}
@keyframes anim-plavayusim-karkasom {
  0%, 100% {
  clip: rect(0px, 220px, 6px, 0px);
  }
  25% {
  clip: rect(0px, 6px, 220px, 0px);
  }
  50% {
  clip: rect(218px, 220px, 220px, 0px);
  }
  75% {
  clip: rect(0px, 220px, 220px, 218px);
  }
}

Здесь рекомендую посмотреть демонстрацию, ведь не только одни черточки идут по сторонам, также работает эффект наведение клика, где все преображается.

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

Вариант #3

Как с помощью CSS анимировать пунктирную рамку

Появление обвода для блока рамки при наведении.

HTML

Код

<div class="odnokratnaya-obvodka">Рамка 3</div

CSS

Код

.odnokratnaya-obvodka {
  width: 215px;
  height: 215px;
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-family: 'Roboto Condensed', sans-serif;
  background-repeat: no-repeat;
  background-image: linear-gradient(to right, #95b4ce 100%, #a2c4e0 100%), linear-gradient(to bottom, #9fb7cc 100%, #9cbbd4 100%), linear-gradient(to right, #93b6d4 100%, #91aec5 100%), linear-gradient(to bottom, #98b4cc 100%, #a3c0d8 100%);
  background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%;
  background-position: 0 0, 100% 0, 100% 100%, 0 100%;
  animation: anim-odnokratnaya-obvodka 1.25s cubic-bezier(0.19, 1, 0.22, 1) 1;
  animation-play-state: paused;
}
.odnokratnaya-obvodka:hover {
  animation-play-state: running;
  cursor:pointer;
}
@keyframes anim-odnokratnaya-obvodka {
  0% {
  background-size: 0 6px, 6px 0, 0 6px, 6px 0;
  }
  25% {
  background-size: 100% 6px, 6px 0, 0 6px, 6px 0;
  }
  50% {
  background-size: 100% 6px, 6px 100%, 0 6px, 6px 0;
  }
  75% {
  background-size: 100% 6px, 6px 100%, 100% 6px, 6px 0;
  }
  100% {
  background-size: 100% 6px, 6px 100%, 100% 6px, 6px 100%;
  }
}

В этом случай также предусмотрено demo, так как по умолчанию идет одно название, но при наведение идет появление каркаса. Но появление отличается от стандартного, если по стандарту весь элемент меняется, то здесь идет по сторонам в заданном времени с наведением курсора.

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

Технология и реализация будут немного отличаться для всех, но общие принципы должны быть полезны практически в любой ситуации. Так как Блок с плавающим бордюром можно наблюдать на разной тематической площадке, где отлично подчеркивают основу дизайна.

Источник: atuin.ru

08 Августа 2019 Просмотров: 1421 Комментариев: (0)

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

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

Kosten

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