эффект пульсирующей кнопки. Как?

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

Автор Темы
Korban
Экспериментатор
Экспериментатор
Сообщения: 80
Зарегистрирован: 25 авг 2013, 22:38
Версия Web Builder: 11.0.5

эффект пульсирующей кнопки. Как?

Сообщение Korban » 30 мар 2021, 15:05

Подскажите как сделать эффект пульсирующей кнопки? хочу чтобы кнопка запуска видео (значок ютюб) пульсировал

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

spoon
Эксперт
Эксперт
Сообщения: 1460
Зарегистрирован: 17 сен 2016, 13:20
Версия Web Builder: 14.2.2
Имя: Дмитрий
Контактная информация:

эффект пульсирующей кнопки. Как?

Сообщение spoon » 31 мар 2021, 09:25

Встроенные эффекты смотрели?
Съешь ещё этих мягких французских булок, да выпей чаю!
Мой skype xmen1005

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

Автор Темы
Korban
Экспериментатор
Экспериментатор
Сообщения: 80
Зарегистрирован: 25 авг 2013, 22:38
Версия Web Builder: 11.0.5

эффект пульсирующей кнопки. Как?

Сообщение Korban » 31 мар 2021, 14:11

вот пример кнопки - http://спк-лазурный.рф/red

из кнопки выходят увеличивающиеся пульсирующие окружности

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

Gudwinn
Эксперт
Эксперт
Сообщения: 1419
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

эффект пульсирующей кнопки. Как?

Сообщение Gudwinn » 03 апр 2021, 13:56

Korban, Привет! В общем либо перетаскиваешь в проект html вставку и выбираешь в ней тип css в медиа запросе(тогда <style></style> убрать из кода), либо по классике в исходнике страницы , выбираешь между тегами head , и вставляешь этот код

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

<style>
@-webkit-keyframes pulse {
      0% {
        -ms-transform: scale(0.5);-webkit-transform: scale(0.5);transform: scale(0.5);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      20% {
        -ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);
        opacity: 0;
      }
      100% {
        -ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);
        opacity: 0;
      }
    }
    @keyframes pulse {
      0% {
        -ms-transform: scale(0.5);-webkit-transform: scale(0.5);transform: scale(0.5);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      20% {
        -ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);
        opacity: 0;
      }
      100% {
        -ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);
        opacity: 0;
      }
    }
.wrap_blick::after{   
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    border-radius: 50%;
    -webkit-animation: pulse 7s linear infinite;
    animation: pulse 7s linear infinite;
    pointer-events: none;
    cursor: default;
    border: inherit;
}
</style>
В самом элементе, которому надо задать блик, в html исходнике элемента в теге пишешь это: class="wrap_blick" Естественно, этому элементу надо задать границу, её цвет и радиус в билдере как обычно, вот собственно и всё. Частоту появления пульсирующих анимаций, можешь регулировать, меняя значение - 7s (это сейчас по умолчанию стоит)
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

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

Автор Темы
Korban
Экспериментатор
Экспериментатор
Сообщения: 80
Зарегистрирован: 25 авг 2013, 22:38
Версия Web Builder: 11.0.5

эффект пульсирующей кнопки. Как?

Сообщение Korban » 03 апр 2021, 22:34

Благодарю за обратную связь, Gudwinn
в предпросмотре не работает этот скрипт? заливать надо на хостинг?

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

Gudwinn
Эксперт
Эксперт
Сообщения: 1419
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

эффект пульсирующей кнопки. Как?

Сообщение Gudwinn » 04 апр 2021, 04:50

Korban, Работает в предпросмотре, без проблем
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853

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

Alex15963
Опытный
Опытный
Сообщения: 674
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4
Имя: Алексей

эффект пульсирующей кнопки. Как?

Сообщение Alex15963 » 05 апр 2021, 23:35

Привет Кирилл! Давно тебя не было видно! А в предпросмотре точно должно быть видно? Что-то у меня не видно. :ny_tik: Вот проект
У вас нет необходимых прав для просмотра вложений в этом сообщении.

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

Cheririna
Интересующийся
Интересующийся
Сообщения: 49
Зарегистрирован: 30 июн 2018, 21:34
Версия Web Builder: 14.2.2
Имя: Ирина

эффект пульсирующей кнопки. Как?

Сообщение Cheririna » 06 апр 2021, 15:06

Можно как то так
У вас нет необходимых прав для просмотра вложений в этом сообщении.

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

Cheririna
Интересующийся
Интересующийся
Сообщения: 49
Зарегистрирован: 30 июн 2018, 21:34
Версия Web Builder: 14.2.2
Имя: Ирина

эффект пульсирующей кнопки. Как?

Сообщение Cheririna » 06 апр 2021, 18:14

Здесь как в примере
У вас нет необходимых прав для просмотра вложений в этом сообщении.

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

e332va
Подающий надежды
Подающий надежды
Сообщения: 140
Зарегистрирован: 19 июн 2014, 14:11
Версия Web Builder: 14.2.2
Имя: Степан

эффект пульсирующей кнопки. Как?

Сообщение e332va » 06 апр 2021, 20:58

Если нужна такая как на сайте: http://www.orelplazmatv.ru
То делается легко, смотрите фото:
Изображение
????????????????????????
Делаются проекты с помощью программы:
? Интернет- магазин - OrelPandora
? Трансферная компания - ОрелТрансфер
? Компания ОрёлДилер
? Сеть мониторов PLAZMA TV
? Всё для праздника - ОрелПраздник
? Автострахование - ОрелАгент
????????????????????????

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

Alex15963
Опытный
Опытный
Сообщения: 674
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4
Имя: Алексей

эффект пульсирующей кнопки. Как?

Сообщение Alex15963 » 06 апр 2021, 21:48

Спасибо ребята!!! :ya_hoo_oo:
Cheririna - супер. :dan_ser:

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

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

эффект пульсирующей кнопки. Как?

Сообщение Eric » 06 апр 2021, 23:10

Alex15963, расширение
У вас нет необходимых прав для просмотра вложений в этом сообщении.
Это надо отметить! Официант! Четыреста капель валерьянки и салат.

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

Alex15963
Опытный
Опытный
Сообщения: 674
Зарегистрирован: 17 фев 2015, 13:13
Версия Web Builder: 10.4.4
Имя: Алексей

эффект пульсирующей кнопки. Как?

Сообщение Alex15963 » 08 апр 2021, 01:17

Дим. Спасибки!!! :co_ol:

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

Gudwinn
Эксперт
Эксперт
Сообщения: 1419
Зарегистрирован: 07 авг 2015, 18:39
Версия Web Builder: 11.0.2
Имя: Кирилл

эффект пульсирующей кнопки. Как?

Сообщение Gudwinn » 25 апр 2021, 14:50

Alex15963, Алекс привет! Да, немного занят был... В проекте всё должно работать, вы элементу класс нужный не забыли добавить?
создание и разработка сайтов
Платные консультации
Готовые решения
Скайп: kirill47853


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

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

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

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