Movement Chain of Ants

Asked

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

esse é o exemplo de imagem que desejo

javascript html css

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

  • Ready is how I hope

1 answer

4

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)

inserir a descrição da imagem aqui

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>

  • 1

    I think this is the right way. I know another technique using linear-gradiente as background but I’m hesitant to present it because I’m afraid to appear gambiarristico.

  • 1

    @Augustovasques hahaha none of this, CSS eh a gambiarra by definition practically rss. Shoot there, I had come to think of this hypothesis tbm, gradient and bg-position in two pseudo element 2px larger than the container

Browser other questions tagged javascript html css

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