Перемещение пунктирной границы с использованием CSS - PullRequest
Новая
       12

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

23 голосов
/ 10 марта 2011

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

Есть ли способ добиться этого?

Ответы [ 8 ]

28 голосов
/ 11 марта 2011

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

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

17 голосов
/ 30 августа 2011

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

.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>
13 голосов
/ 10 марта 2011

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

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

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

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

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

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

3 голосов
/ 15 мая 2017

Вот два примера использования 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>
3 голосов
/ 06 мая 2011

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

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

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

2 голосов
/ 19 августа 2016

Вот довольно гибкий вариант 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;
}
2 голосов
/ 10 марта 2011

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

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

1 голос
/ 10 марта 2011

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

...