Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Ламерские вопросы Эффект анимации границ с помощью SVG и CSS как?

Эффект анимации границ с помощью SVG и CSS как?


     12.11.2015    Ламерские вопросы    542

вопрос
Здравствуйте. Решил сделать у себя на сайте красивую анимацию для картинок. Вот так она выглядит. На этой же странице присутствует способ интеграции этого эффекта на сайт. Мучаюсь уже целый день, но так ничего и не получилось. Помогите пожалуйста установить сие чудо на сайт. Спасибо.

Ответа пока нет


Комментарии пользователей (4)

gm111
4

gm111 - 12 ноября 2015 16:17 - Гости

Не вижу ничего сложного.

Orochimaru
8 | 1

Orochimaru - 12 ноября 2015 16:33 - Юзер

gm111, css положил в нужное место, в main.tpl вызвал их, в шаблоне добавляю, эффект не отображается.

Orochimaru
8 | 1

Orochimaru - 13 ноября 2015 10:15 - Юзер

опишу подробней.
создал css файл вот с таким содержимым:
div {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ddd;
}

svg {
    position: absolute;
    top: 0;
    left: 0;
}

svg line {
    stroke-width: 10;
    stroke: #000;
    fill: none;
    stroke-dasharray: 200;
    -webkit-transition: all .6s;
    transition: transform .6s;
}

div:hover svg line.top {
  -webkit-transform: translateX(-400px);
  transform: translateX(-400px);
}

div:hover svg line.bottom {
  -webkit-transform: translateX(400px);
  transform: translateX(400px);
}

div:hover svg line.left {
  -webkit-transform: translateY(400px);
  transform: translateY(400px);
}

div:hover svg line.right {
  -webkit-transform: translateY(-400px);
  transform: translateY(-400px);
}

в main.tpl вставил вот так.
<head>
<link media="screen" href="{THEME}/style/svg.css" type="text/css" rel="stylesheet" />
</head>

вызываю вот так.
  <div>
      <svg width="200" height="200">
          <line class="top" x1="0" y1="0" x2="600" y2="0"/>
          <line class="left" x1="0" y1="200" x2="0" y2="-400"/>
          <line class="bottom" x1="200" y1="200" x2="-400" y2="200"/>
          <line class="right" x1="200" y1="0" x2="200" y2="600"/>
      </svg>
  </div>

но безрезультатно, кто с SVG знаком напишите пожалуйста как эффекта добиться?

Orochimaru
8 | 1

Orochimaru - 13 ноября 2015 10:35 - Юзер

Спасибо, разобрался сам, косяки с классами у меня были.

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы