• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимированная рамка для блока на CSS (Эффект анимации рамки с помощью HTML + CSS)
Анимированная рамка для блока на CSS
Kosten
Дата: Четверг, 2019-08-08, 22:05 | Сообщение 1
Онлайн
Администраторы
Сообщений:25246
Награды: 57


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

Такой вид рамки изначально иметь несколько оттенков цвета, где веб-разработчик можно получить оригинальный трюк эффекта, а это нужно только убрать overflow: hidden и также здесь закреплена demo страница.

Все проверено по работе:



HTML

Код
<div class="plavayusum-bordyurom">ZORNET.RU</div>

CSS

Код
.plavayusum-bordyurom {
    position: relative;
    z-index: 0;
    width: 217px;
    height: 217px;
    border-radius: 10px;
    overflow: hidden;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;  
    font-size: 24px;  
}
.plavayusum-bordyurom::before {
    content: '';
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #a1cbef;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#a4c8e6, #a7ccea), linear-gradient(#286ca7, #296ca7), linear-gradient(#BFE2FF, #a5cae8), linear-gradient(#2a6ea9, #2c70ab);
    animation: anim-plavayusum-bordyurom 4s linear infinite;
}
.plavayusum-bordyurom::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
}
@keyframes anim-plavayusum-bordyurom {
    100% {
  transform: rotate(1turn);
    }
}

На этом вся установка, но если вам понравилась идея, то можете посмотреть еще варианты на эффекты анимации рамки, которые идут в оригинальной анимации.

Демонстрация
Прикрепления: 1351554.png(10.3 Kb) · sardan.zip(2.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимированная рамка для блока на CSS (Эффект анимации рамки с помощью HTML + CSS)
  • Страница 1 из 1
  • 1
Поиск: