Задать вопрос
Не нравятся результаты поиска? Попробуйте другой поиск!
DLE FAQ » Все вопросы » Ламерские вопросы » Эффект анимации границ с помощью SVG и CSS как?

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

     12.11.2015    Все вопросы » Ламерские вопросы    1343

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

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

 

4 комментария

gm111
Гости

gm111 - 12 ноября 2015 16:17 -

Не вижу ничего сложного.
Orochimaru
Юзер

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

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

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
Юзер

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

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

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

 05.04.2012 Bugagashechki  Общие вопросы, Общие вопросы по PHP, Модули, Ламерские вопросы
 24.07.2013 glebvas2  Общие вопросы по вёрстке, Шаблоны (TPL), Стили (CSS), Ламерские вопросы
 29.08.2013 ytg2808  Ламерские вопросы
 25.04.2014 Sexo  Ламерские вопросы
 13.07.2014 Lalka  Ламерские вопросы
 04.09.2014 Tesak  Хаки, Ламерские вопросы
 18.09.2014 Sergey8168  Модули, Ламерские вопросы
 01.10.2015 Vn-tours  Общие вопросы по вёрстке, Стили (CSS), Ламерские вопросы
 07.10.2015 z1co4e  Ламерские вопросы
 04.11.2015 reter  Ламерские вопросы
  • mondolfo | Как вывесит в comments.tpl картинку с но ... 7
    Фото mondolfo
    mondolfo
    Как вывесит в comments.tpl картинку с новости?
    Вчера, 23:42
    кто-нибудь решил эту?
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 17:08
    Разъясните как вытащить id?
  • lutskboy | Вытащить все данные из определенного доп ... 1
    Фото lutskboy
    lutskboy
    Вытащить все данные из определенного доп поля?
    22-11-2024, 16:17
    в adminer можно.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 16:14
    выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
    js скрипт можно написать
    
<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег
  • Darkzone | Выбор категории для доп. поля? 4
    Фото Darkzone
    Darkzone
    Выбор категории для доп. поля?
    22-11-2024, 14:39
    Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
  • lutskboy | Выбор категории для доп. поля? 4
    Фото lutskboy
    lutskboy
    Выбор категории для доп. поля?
    22-11-2024, 13:52
    где выводить? админка или сайт
  • TeraMoune | Как отключить миниатюры стандартной гале ...
    Фото TeraMoune
    TeraMoune
    Как отключить миниатюры стандартной галереи Fancybox?
    21-11-2024, 06:00
    В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

    Например: параметр Thumbs: false отключает миниатюры.
    Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
  • derebas | Как реализовать шифрование трафика? 3
    Фото derebas
    derebas
    Как реализовать шифрование трафика?
    18-11-2024, 16:52
    Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
  • Gordi | Перенёс сайт - не работают кнопки, не от ... 8
    Фото Gordi
    Gordi
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:46
    я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
    Так и было...
  • lutskboy | Перенёс сайт - не работают кнопки, не от ... 8
    Фото lutskboy
    lutskboy
    Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
    18-11-2024, 14:39
    чтоб не удалять выстави права и пользователя какие там идут на файлы. .
наверх