Навигация
Получить консультацию менеджера
Нажимая на кнопку "Перезвонить мне" Вы соглашаетесь с политикой конфиденциальности
Социальные сети
Иконка ВК
Иконка Instagram
Иконка Телеграмм
Иконка Яндекс.Дзен
Бегающая обводка вокруг Shape

Обратите внимание. Техническая поддержка Tilda Publishing не осуществляет поддержку связанную с работой кода.

Привлеките внимание к нужной карточке с помощью эффекта, который представлен на странице.
Данная модификация работает как на десктоп устройствах, так и на мобильных устройствах, что позволит создать по истине уникальный дизайн.
Данная модификация добавит интересный эффект любым Shape, которые созданы в Zero блоке
Отличная возможность добавить изюминку в Ваш проект.
Как это выглядит?
Да точно также, как Shape сбоку. Вы можете менять цвет обводки, радиус скругления, размещать разный контент внутри Shape. Можно использовать для обводки Shape с этапом работы.
Как это добавить?
Первый шаг
Создаем Zero блок, добавляем в него нужный контент. Создаем Shape и задаем ему CSS имя - box.
Второй шаг
Создаем блок T123 и добавляем в него код. Внутри кода стоят комментарии для Вашего удобства.

<!--взято с сайта https://digistudio.su/podsvechivanie-shape-kartochek-->

<style>
.box {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    border-radius: 10px; /*здесь можно менять значение скргления шейпа*/
}

.box::before {
    position: absolute;
    content: '';
    width: 130px;
    height: 140%;
    background: linear-gradient(#f00, #0f0); /*здесь можно указать цвета бегающей обводки*/
    animation: animate 5s linear infinite;
}

@keyframes animate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(360deg);
  }
}

.box::after {
  position: absolute;
  content: '';
  inset: 4px; /*здесь можно поменять ширину бегающей обводки*/
  background-color: #6AA353; /*здесь укажите тот цвет, который указали в шейпе в Zero Block*/
  border-radius: 10px; /*здесь также можно менять значение скргления внутреннего шейпа*/
}

</style>
Как Вам модификация?
Попробуйте наши модификации по пробному тарифу на 2 недели за 99 рублей.
Made on
Tilda