Сделать эффект блика для кнопки DIVI theme Wordpress

Рейтинг: 0Ответов: 1Опубликовано: 18.02.2025

Скажите а как можно сделать в divi theme эффект блика на кнопке? Код есть. Применил и он не работает. Css класс прописывал. Помогите пожалуйста. Код приведу ниже

body.page-template-default #page-container .et_pb_section .et_pb_button_0:before {
        display: block !important
}

.flare-button {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.flare-button:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    opacity: 1;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
}


@keyframes moving {
    30% {
        webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);
        
    }
    
    100% {
        webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);
        
    }
}

css wordpress анимация
Источник: Stack Overflow на русском

Ответы

▲ 0

Этот код работает, проверено на Divi 4.27.4

В том случае, когда что-то работает в конструкторе, но не работает при просмотре страницы, рекомендуется на забывать очищать кэш - в самом браузере, в конструкторе (кэш стилей).

Если нужно, могу ещё проверить и в случае использования актуальной альфа-версии Divi 5.