punteado - rayado css

Mover el borde punteado usando CSS

Question

Tengo una clase que aplica una propiedad de borde de estilo de puntos a un bloque de texto en tiempo de ejecución. Estoy tratando de encontrar una solución, usando CSS, que hace que el borde se mueva como una imagen gif.

¿Hay alguna manera de lograr esto?

Answer 1

¿Quieres decir que quieres animar el borde punteado?

Puede mirar las imágenes de borde de CSS 3 , lo que le permitiría proporcionar un gif (animado) para su borde, si no le importa no admitir IE.

Answer 2

Aquí hay dos ejemplos usando border-image .

Ventajas:

• Solo una div
• Dentro puede ser verdaderamente transparente.

.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>

Answer 3

Aquí hay una opción SCSS bastante flexible:

$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;
}

Answer 4

Esto depende de cómo quieres que se vea exactamente la animación.

En general, los estilos que le da el border-style se representan de forma estática; Simplemente no es posible animarlos.

Incluso con CSS3, sus opciones son bastante limitadas. Lo mejor que puedes hacer con border-image es con un GIF animado cuidadosamente elaborado (de nuevo, dependerá de cómo un navegador implemente border-image con imágenes animadas) o con una animación de gradiente, y lo que elijas dependerá del navegador Compatibilidad y cómo quieres que se vea tu efecto.

De lo contrario, puede experimentar con ::before y ::after pseudo-elementos para lograr el efecto deseado.

Sin embargo, como advertencia, a menos que pueda asegurarse de que su animación cumpla con las pautas relevantes de WCAG, en particular 2.2.2 y 2.3, le recomiendo encarecidamente que no busque el GIF animado. Además de ser peligroso para ciertas personas, una animación mal elaborada puede resultar más molesta que útil para la mayoría: esto es lo que hizo a los GIF animados tan infames en la actualidad.

En otras palabras, use esta técnica con moderación, y solo cuando sepa que se agrega a la experiencia del usuario en lugar de quitarla.

Answer 5

He hecho un ejemplo completo basado en http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page . ¡Disfrutar!

.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>

Answer 6

No CSS3, pero funciona: http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

Puede hacerlo sin imágenes, utilizando gradientes CSS3 para las franjas y animando la posición de fondo (demo en bruto: http://codepen.io/christopheschwyzer/pen/CEwBI ), pero no lo recomendaría ya que solo funcionaría bien en webkit.

Answer 7

Puedes usar una imagen gif en el fondo, la única solución para hacerlo a través de css. de lo contrario su javascript

Answer 8

También estoy buscando una solución de este tipo ya que estoy tratando de simular el borde animado que Excel utiliza para indicar que la selección actual se ha cortado y está a la espera de ser pegada.

¿Pegajoso? No, no en el contexto del uso que pretendo.

He encontrado este plugin jQuery. http://there4development.com/projects/animatedborder/ , el póster original podría querer darle una oportunidad.