Перемещение пунктирной границы с помощью CSS

Ответ 1

Это зависит от того, что именно вы хотите, чтобы анимация выглядела.

В общем, стили, предоставленные вам border-style, визуализируются статически; это просто невозможно оживить.

Даже с CSS3 ваши варианты довольно ограничены. Лучшее, что вы можете сделать с border-image, либо с тщательно продуманным анимированным GIF (опять же, это будет зависеть от того, как браузер реализует border-image с анимированными изображениями), либо с помощью анимации градиента - и в зависимости от того, что вы выбираете, зависит от браузера совместимость и то, как вы хотите, чтобы ваш эффект выглядел.

В противном случае вы можете поэкспериментировать с ::before и ::after псевдоэлементами для достижения желаемого эффекта.

Как предупреждение, однако, если вы не можете обеспечить, чтобы ваша анимация соответствовала соответствующим рекомендациям WCAG, в частности, 2.2.2 и 2.3, я настоятельно рекомендую не учитывать особенности анимированного GIF-представления. Помимо опасностей для некоторых людей, плохо продуманная анимация может оказаться более раздражающей, чем полезной для большинства - это то, что заставило анимированные GIF столь печально напоминать в тот день.

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

Ответ 2

Не CSS3, но он работает: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

Вы можете сделать это без изображений, используя градиенты CSS3 для полос и анимацию фона (грубая демонстрация: http://codepen.io/christopheschwyzer/pen/CEwBI), но я бы не стал рекомендую его, так как он будет работать только на Webkit.

Ответ 3

Я сделал полный пример на основе в этой статье. Наслаждайтесь!

.outer {
  position: absolute;
  
  left: 100px;
  top: 50px;
  width: 100px;
  height: 100px;
  
  background-image: url(http://matthewjamestaylor.com/blog/selection.gif);
  
  border: 1px solid;
}

.selected {
  border: 0px;
}

.inner {
  position:absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;

  background-color: #9CF;
}

.selected .inner {
  margin: 1px;
}

<div class="outer selected">
  <div class="inner" />
</div>

Ответ 4

Я также ищу такое решение, так как я пытаюсь имитировать анимированную рамку, которую использует excel, чтобы указать, что текущий выбор был вырезан и ожидает, чтобы его вставляли.

липкий? Нет, не в контексте использования, которое я намерен.

Я нашел этот плагин jQuery. http://there4development.com/projects/animatedborder/, оригинальный плакат, возможно, захочет дать ему шанс.

Ответ 5

Вы хотите, чтобы вы анимировали пунктирную границу?

Вы можете посмотреть CSS 3 border images, который позволит вам предоставить (анимированный) gif для вашей границы, t mind не поддерживает IE.

Ответ 6

Вот два примера, используя border-image.

Преимущества:

• Только один div
• Внутри может быть действительно прозрачным

.selected {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50px;

  border: 1px solid transparent;
  box-sizing: border-box;

  border-image-outset: 0px;
  border-image-repeat: repeat;
  border-image-source: url("http://matthewjamestaylor.com/blog/selection-big.gif");
}

.v1 {
  left: 100px;

  border-image-slice: 6;
  border-image-width: 1px;
}

.v2 {
  left: 300px;

  border-image-slice: 3;
  border-image-width: 2px;
}

<p style="color: #aaa;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquam metus hendrerit venenatis placerat. Morbi sem ex, egestas at egestas iaculis, imperdiet in mauris. Nulla facilisi. Aliquam eu porttitor libero, vel porta ipsum. Proin egestas consequat urna, et rhoncus arcu congue vitae. Maecenas at massa mollis, accumsan mauris in, faucibus ligula. Nulla sed lorem pharetra lacus dictum lobortis sit amet id tellus. Vestibulum porta auctor maximus. Fusce congue, orci et feugiat ultricies, turpis mi egestas est, nec vulputate nulla risus quis lorem. Sed vitae risus rhoncus, ultricies nunc non, mollis mauris.</p>

<div class="selected v1">
</div>

<div class="selected v2">
</div>

Ответ 7

вы можете использовать gif-изображение в фоновом режиме, единственное решение для этого через css. в противном случае ваш javascript

Ответ 8

Здесь довольно гибкая опция SCSS:

$antlength: 50px;
$antwidth: 10px;
$antcolor: black;

@keyframes marching-ants {
    0%   {background-position: 0 0, $antlength 100%, 0 $antlength, 100% 0;}
    100% {background-position: $antlength 0, 0 100%, 0 0, 100% $antlength;}
}

.ants {
    background-image: linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(90deg, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%),
        linear-gradient(0, $antcolor 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: $antlength $antwidth, $antlength $antwidth, $antwidth $antlength, $antwidth $antlength;
    animation: marching-ants 400ms infinite linear;
}