Html Division border animation

Я изучаю css & jquery.Html Division border animation

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
#box 
{ 
border-style:solid; 
border-color:red; 
height: 80px; 
width: 180px; 
} 
</style> 
</head> 

<body> 
<div id="box">Demo Box</div> 
</body> 
</html>

, что я пытаюсь достичь границы цвета должны появиться с левой верхней и поток для создания границы окна вокруг разделения. кажется, невозможно просто узнать экспертное руководство, если это можно сделать.

* Редактировать MobyD спасибо «как Tron велосипед»

источник

2012-06-21 Daniel Euchar

Не совсем понятно, о чем вы просите. что вы подразумеваете под «потоком»? –

можно сделать. но не прямолинейно. – techfoobar

Что вы хотите сделать? что вы пробовали ??? –

Предполагая, что вы хотите анимацию вокруг коробки, она может быть организована анимировать последовательность строк, каждая анимация запуска следующего, как она заканчивается.

addLine1(); 
line1.animate({ width: width-of-box }, duration, function() { 
    addLine2(); 
    line2.animate({ height: height-of-box }, duration, ...); 
});

Каждая строка должна быть расположена в соответствующем углу.

Demo

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

источник

2012-06-21 12:49:43

Чувак, ты - полная заставка, спасибо большое :) –

Отлично работает! Может ли эта анимация зацикливаться? У меня есть рабочая демонстрация здесь: http://tron.syntheticmedia.net – Paul

@Paul: [Быстрое исправление] (http://jsfiddle.net/ZXEB3/). Добавлен параметр цвета и обратный вызов после завершения всей анимации, так что анимация может быть последовательно вызвана для двух разных цветов. Может быть аккуратно, может определенно очистить после себя. Если это та анимация, которую вы хотите. Если вы просто хотите, чтобы он перезагрузился и начался, вы можете просто положить все в функцию и убедиться, что вы вызываете '$ ('. Line'). Remove()' вверху. –

-1

Предполагая, что вы хотите градиент границы или что вы имеете в виду поток?

Да, это можно сделать.

Пример 2px градиент граница:

Просто создайте DIV, расположенный относительно которой имеет градиент фона в ваших цветах Затем создайте ребенка DIV позиционируется абсолютно там с widht и высотой немного меньше и вы готовы ,

см http://jsfiddle.net/njL3H/

источник

2012-06-21 12:26:44 Tschallacka

Он хочет, чтобы граница была анимирована вокруг дива, как трона. Не то, чтобы граница была градиентом –

вправо, ну, тогда мне нужно адаптировать мой ответ. – Tschallacka

Html Division border animation

ответ

Смежные вопросы