0

Есть такой плагин как Page Builder от SiteOrigin. Хочу сделать такие же окошка анимации. Пишу код через билдер

    <a href="/kompleksnaya-strategiya/">
        <img src="/wp-content/uploads/2017/07/line-1.svg" class="mainpage__service__svg" />
        <div class="mainpage__service__caption">
        <img src="/wp-content/uploads/2017/07/1.svg" class="img-responsive mainpage__service__img" />
        <div class="mainpage__service__title">КОМПЛЕКСНАЯ<br>PERFORMANCE<br>СТРАТЕГИЯ</div>
        </div>
        <div class="mainpage__service__descr">
    Это комплексная стратегия продвижения в digital-среде, целью которой 
является достижение конкретных и измеримых результатов.
</div>
    </a>

Нажимаю сохранить и после этого блдер немного сам изменил сам код

    <a href="/kompleksnaya-strategiya/">
    <img class="mainpage__service__svg" src="/wp-content/uploads/2017/07/line-1.svg" /></a>
    <div class="mainpage__service__caption">
<img class="img-responsive mainpage__service__img" src="/wp-content/uploads/2017/07/1.svg" />
    <div class="mainpage__service__title">
КОМПЛЕКСНАЯ
    PERFORMANCE
    СТРАТЕГИЯ</div>
    </div>
    <div class="mainpage__service__descr">
Это комплексная стратегия продвижения в digital-среде,
 целью которой является достижение конкретных и измеримых результатов.
</div>

И анимация не работает и текст плывет....введите сюда описание изображения СSS стль вот(сами изображение svg)

.mainpage__service{
    display: block;
    text-decoration: none;
    padding: 80px 0;
    height: 280px;
    position: relative;
}
    .mainpage__service__svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.mainpage__service__svg:hover {
    fill: #f4783e;
    /* цвет обводки */
    stroke: white;
    /* имя анимации (keyframes) */
    animation-name: draw_symbol;
    /* длительность анимации */
    animation-duration: 2.5s;
}

@media (max-width: 767px){
    .mainpage__service__svg {
        display: none;
    }
}
.mainpage__service__svg line {
    stroke-width: 1;
    stroke: #F3773D;
    fill: none;
    -webkit-transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
}
.mainpage__service .mainpage__service__svg line.top,
.mainpage__service .mainpage__service__svg line.bottom {
    stroke-dasharray: 390;
}

.mainpage__service:hover .mainpage__service__svg line.left,
.mainpage__service:hover .mainpage__service__svg line.right {
    stroke-dasharray: 280;
}

.mainpage__service .mainpage__service__svg line.top{
    -webkit-transform: translateX(-390px);
    transform: translateX(-390px);
}

.mainpage__service .mainpage__service__svg line.bottom {
    -webkit-transform: translateX(390px);
    transform: translateX(390px);
}

.mainpage__service .mainpage__service__svg line.left {
    -webkit-transform: translateY(-280px);
    transform: translateY(-280px);
}

.mainpage__service .mainpage__service__svg line.right {
    -webkit-transform: translateY(280px);
    transform: translateY(280px);
}


.mainpage__service:hover .mainpage__service__svg line {
    transition-delay: 0ms;
}
.mainpage__service:hover .mainpage__service__svg line {
    transition-delay: 150ms;
}

.mainpage__service:hover .mainpage__service__svg line.top,
.mainpage__service:hover .mainpage__service__svg line.bottom {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.mainpage__service:hover .mainpage__service__svg line.left,
.mainpage__service:hover .mainpage__service__svg line.right {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.mainpage__service__caption{
    font-size: 0;
    text-align: center;
    margin-bottom: 30px;
}
.mainpage__service__img,
.mainpage__service__title{
    display: inline-block;
    vertical-align: middle;
}
.mainpage__service__img{
    fill: #18242c;
    display: inline-block;
    width: 122px;
    margin-right: 19px;
    -webkit-transition: fill .9s;
    -o-transition: fill .9s;
    transition: fill .9s;
}

.mainpage__service:hover .mainpage__service__img{
    fill: #F3773D;
}

.mainpage__service__img .st1{
    fill:#1e94d2
}
.mainpage__service__title{
    display: inline-block;
    font-size: 20px;
    font-family: "Roboto";
    color: #18242c;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
    width: 150px;
}
.mainpage__service__descr{
    font-size: 14px;
    font-family: "Roboto";
    color: rgba(24, 36, 44, 0.78);
    line-height: 1.2;
    text-align: center;
    max-width: 280px;
    margin: auto;
}
3
  • У вас в вёрстке ошибка, вот он и закрывает блоки, там где ему хочется. Добавьте вконце перед тегом </a> закрывающий тег `</div>' 13 июл 2017 в 14:33
  • Никаких результатов оно не дало 13 июл 2017 в 14:46
  • Поправьте свой html в вопросе, чтобы было видно, где и что у вас должно лежать, тогда будет понятно, что и куда вы написали неверно. 13 июл 2017 в 14:50

1 ответ 1

0

Сделал по-другому, создал доп файл в формате .php вставил туда весь код, подключал через команду include(); и плагин PHP Code Widget, сделал отлично!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.