Скопировать анимацию, не могу заставить работать  [РЕШЕНО]

WYSIWYG Web Builder, вопросы которые не охвачены в других разделах.
Правила форума
1. Название темы должно кратко описывать суть вашего вопроса, темы типа: "Помогите", "Почему", "Что это", "Что-то глючит" - будут удаляться.
2. Задавая свой вопрос, постарайтесь предоставить максимум информации о проблеме, если есть возможность, приложите шаблон проекта *.wtp.
Подробнее: Правила создания новых тем и ответов на существующие темы.
Данный форум - это место обсуждения вопроса, а не техподдержка в классическом смысле. Все участники форума Web Builder по-русски с удовольствием вам помогут, если это будет в их силах.
Ответить Вложения 1
Аватара пользователя

Автор Темы
Smart77
Экспериментатор
Экспериментатор
Сообщения: 76
Зарегистрирован: 31 июл 2019, 11:18
Версия Web Builder: 14.2.2

Скопировать анимацию, не могу заставить работать

Сообщение Smart77 » 10 ноя 2020, 23:24

Всем привет
на сайте https://www.favorit-stone.com/ на первом экране нашел простую анимашку, в виде расходящихся кругов, просто и красиво,
нашел в коде, в стилях, перенес, и... неработает, что то делаю не так,
подскажите пожалуйста где затык.
У вас нет необходимых прав для просмотра вложений в этом сообщении.

Реклама
Аватара пользователя

Eric
Продвинутый
Продвинутый
Сообщения: 322
Зарегистрирован: 19 дек 2018, 17:40
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

Скопировать анимацию, не могу заставить работать  [РЕШЕНО]

Сообщение Eric » 11 ноя 2020, 02:22

Smart77, keyframes в стили не добавили.
И добавьте в слой класс circle.

Код: Выделить всё

@keyframes pulse {
 0% {
  transform: scale(0.5);
  opacity: 0;
 }
 50% {
  opacity: 0.7;
 }
 100% {
  transform: scale(1.6);
  opacity: 0;
 }
 
}
.circle{
   width: 500px;
   height: 500px;
   border-radius: 100%;
    position: absolute;
}
.circle:before,
.circle:after {
 content: '';
 position: absolute;
 border: 1px solid rgba(255, 255, 255, 0.4);
 left: -10px;
 right: -10px;
 top: -10px;
 bottom: -10px;
 border-radius: 50%;
 animation: pulse 7s linear infinite;
 opacity: 0;
 z-index: -1;
}
.circle:after {
 animation-delay: 5s;
}


https://yadi.sk/d/KWY3AYobkl65_g
Разработка расширений под WebBuilder.

Аватара пользователя

Автор Темы
Smart77
Экспериментатор
Экспериментатор
Сообщения: 76
Зарегистрирован: 31 июл 2019, 11:18
Версия Web Builder: 14.2.2

Скопировать анимацию, не могу заставить работать

Сообщение Smart77 » 11 ноя 2020, 11:04

Спасибо большое!!!
Чуть допилил, и прям как для меня!!!


Ответить Вложения 1

Вернуться в «Общие вопросы.»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 5 гостей