Example code for implementing dotted border scrolling effect with CSS

We often see a cool effect where the mouse hovers over an area and the area displays a dotted border and line animation. How is this effect achieved? This article provides several ideas for your reference.

Basic HTML

<div class="box">
  <p>Test Test</p>
</div>

Easy-way

This is done with a background image.

p must be centered vertically. Do you remember how to center it vertically? See another blog for details~

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(upload/2022/web/selection.gif);
  p {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: calc(100% - 2px);
    width: calc(100% - 2px);
    background-color: #fff;
  }
}

repeating-linear-gradient

135 degree repeating linear gradient, p expands the height, and the white background covers the outer div gradient.

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135 degrees,
    transparent,
    transparent 4px,
    #000 4px,
    #000 8px
  );
  overflow: hidden; // Create a new BFC to solve the problem of margin collapsing in the vertical direction animation: move 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move {
  from {
    background-position: -1px;
  }
  to {
    background-position: -12px;
  }
}

linear-gradient&&background

Draw a dotted line using linear gradient and background-size, and then move it to the four sides using background-position. The advantage of this method is that you can set the styles of the four edges and the direction of the animation separately. Careful students should find that the animation of the previous method is not clockwise or counterclockwise.

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x;
  background-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  animation: move2 1s infinite linear;
  p {
    margin: 1px;
  }
}
@keyframes move2 {
  from {
  }
  to {
    background-position: 0 -12px, 100% 12px, 12px 0, -12px 100%;
  }
}

linear-gradient&&mask

The mask attribute specification has been included in the list of candidate recommended specifications. It is a foregone conclusion that it will be included in the established specifications and standards in the future. You can study it with confidence, as it will be useful in the future.

Mask can also be used here to achieve the same animation, and can also achieve the effect of dotted border gradient color. The difference from background is that mask needs to have an opaque mask in the middle, otherwise the content of the p element will be covered.

.box {
  width: 100px;
  height: 100px;
  background: linear-gradient(0deg, #f0e, #fe0);
  -webkit-mask: linear-gradient(0deg, transparent 6px, #e60a0a 6px) repeat-y,
    linear-gradient(0deg, transparent 50%, #0f0ae8 0) repeat-y,
    linear-gradient(90deg, transparent 50%, #09f32f 0) repeat-x,
    linear-gradient(90deg, transparent 50%, #fad648 0) repeat-x,
    linear-gradient(0deg, #fff, #fff) no-repeat; // You can use any opaque color here -webkit-mask-size: 1px 12px, 1px 12px, 12px 1px, 12px 1px, 98px 98px;
  -webkit-mask-position: 0 0, 100% 0, 0 0, 0 100%, 1px 1px;
  overflow: hidden;
  animation: move3 1s infinite linear;
  p {
    height: calc(100% - 2px);
    margin: 1px;
    background-color: #fff;
  }
}
@keyframes move3 {
  from {
  }
  to {
    -webkit-mask-position: 0 -12px, 100% 12px, 12px 0, -12px 100%, 1px 1px;
  }
}

Click here for the demo

Summarize

The above is the example code of CSS to achieve the dotted border scrolling effect introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<: A brief introduction to web2.0 products and functions

>>: How to implement Vue binding class and binding inline style