Movement Chain of Ants

Question

Movement Chain of Ants

Asked 4 years, 5 months ago

Viewed 86 times

4

I got a flea behind my ear and I was wondering if you guys could help me out on this.

I’m trying to make the edge (dashed) of a div (for example) turn clockwise as if it were a chain of ants going after another, in a movement that would follow the dimensions of the div, only I ended up making a pointer and failed miserably, have how I do what I want, only with HTML, CSS and JS?

body {
  background-color: grey;
  text-align: center;
  transition: 0.5s;
}

p {
  color: white;
  padding: 5px;
  border: 1px dashed white;
  display: inline;
  transition: 0.5s;
  border-radius: 5px;
}

p:hover {
  color: black;
  padding: 8px;
  border: 2px dashed black;
}

<body>
  <p id="name">N0V4</p>
</body>

I tried to do something with @Keywords spin, but I made a pointer, and that was the result I was waiting for...

Show what you tried, if possible, add an image of what you want

– Costamilam

2020/07/05 at 02:08
Ready is how I hope

– user196053

2020/07/05 at 02:32

1 answer

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2020-07-05T12:32:55+00:00

There’s a way to do it, but to do it with border-radius will give you more trouble, because you’ll have to have one path exclusive within the SVG or use the property rx of rect for, but if you want a simple rectangle this or a simple circle this answer will help you (in the case of the path I recommend that you do it in Figma or other software that automatically manages the SVG code).

Here I basically set a size of dash and a dash-offset, where the dash is the tracinho and the dash-offset is the space between a tracinho and another. Then with a @keyframes I did the animation by changing the offset and giving the impression that it is moving.

As a basis I used these other two answers that I myself had already given here. I recommend that you read!!

Partially paint edge in css

How to make a pure css spinner?

About your answer, see the example (not that extending the CSS but vc can adjust the dash and offset to your liking etc)

Image code above. Note that in @keyframes the higher the value of offset faster gets the animation

.btn {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 60px;
  text-transform: uppercase;
  font-family: sans-serif;
  text-decoration: none;
  font-size: 30px;
  transition: 1.5s;
  position: relative;
}
svg,
svg rect,
svg circle{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  fill: transparent;
}
a svg rect,
a svg circle {
  stroke: blue;
  stroke-width: 4;
  transition: all 500ms;
  stroke-dasharray: 10;
  animation: dash 2.5s linear infinite;
}


@keyframes dash {
  to {
    /* quanto maior o valor do offset mais rápido fica a animação */
    stroke-dashoffset: 100;
  }
}

<a href="#" class="btn">
  <svg>
    <rect></rect>
  </svg>
  Btn
</a>


<a href="#" class="btn" style="height: 100px">
  <svg>
    <circle cx="50" cy="50" r="40" />
  </svg>
  Btn
</a>