Если при заходе на сайт вы хотите, чтоб гости и пользователи обратили внимание, то это анимация рамки будет отличным решением. Ведь мы видим каркас, виде квадрата, а по внешней стороне идет анимация, что происходит непрерывно. Но главное в самом блоке можно разместить информацию или элементы виде разных знаков.
Такой вид рамки изначально иметь несколько оттенков цвета, где веб-разработчик можно получить оригинальный трюк эффекта, а это нужно только убрать 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);
}
}
На этом вся установка, но если вам понравилась идея, то можете посмотреть еще варианты на эффекты анимации рамки, которые идут в оригинальной анимации.
Демонстрация
