Often see a cool effect, the mouse hover a region, the region shows a dotted border, and there are line animation, so this effect is how to achieve it, this article provides several ideas for reference only.

Basic HTML

<div class="box">
  <p>Test test</p>
</div>
Copy the code

Easy-way

Through the background image.

P has to be centered vertically. Remember how to center vertically? See another blog

.box {
  width: 100px;
  height: 100px;
  position: relative;
  background: url(https://www.zhangxinxu.com/study/image/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; }}Copy the code

repeating-linear-gradient

135 degree repeating linear gradient, P spread height, white background covering outer div gradient.

.box {
  width: 100px;
  height: 100px;
  background: repeating-linear-gradient(
    135deg,
    transparent,
    transparent 4px.# 000 4px.# 000 8px
  );
  overflow: hidden;				// Create a new BFC to solve the problem of vertical folding margin
  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; }}Copy the code

linear-gradient&&background

Draw a dotted line with a linear gradient and background-size, then move it to the four edges with background-position. The best part of this way is that you can set the style of the four sides and the direction of the animation. Careful students should find that the animation in the previous way 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%; }}Copy the code

linear-gradient&&mask

Mask attribute specification has entered the candidate recommended specification list, will say that the future into the established specification standard is a sure thing, we can rest assured to learn, will be useful in the future.

The same animation can be achieved with a mask, and the effect of dotted border gradient can be achieved. Unlike background, the mask needs to have an opaque mask in the middle, otherwise the content of the P element will be hidden.

.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;		// The color is opaque
  -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; }}Copy the code

The demo point is right here

PS

Today, a man came to our office for an interview. He had five years of work experience. He explained how many projects he had participated in and how to build a front-end project by himself.

Asked a simple question about how to center vertically, the answer was: Flex; I don’t know how to use Flex. Asked what else, replied: transform; Why transform? A: Not really…

And so on, asked a lot of basic things, mostly do not understand, let alone vUE related principle, the flow of diff algorithm.

Finally, ask the expected salary, answer: there is an offer of 18K, expect not less than 18K.

Is I do not understand the market, or now the root is not winter, taking my meager salary for an internal push ~ ~ Nanjing or Hangzhou area.

Personal blog seeking friends chain ~

Fancy electronic resume ~ have a look at it when you are free

reference

Zhang Ge dotted border

Mask tutorial