How to create this effect/animation

Asked

Viewed 87 times

0

circuit board like

I want to use this circuit board effect as animation (starting from the sides and drawing until they are in the center) on my website. But I can’t do it at all.

Is there any way to do this using CSS only? Not using SVG or anything like that?

html css

  • Shadow, it is possible to do with HTML, CSS and JS, only with HTML and CSS, I think it will be impossible.

  • You can make this easy with jquery. It’s nice to have your images ready in gif or png if you need transparency. But if you want the drawing to be done in Runtime is more complex and too broad.

  • I believe that the benefit of doing it only with HTML and CSS, makes it impossible to do it. Here’s what @Danielomine said :)

  • @Danielomine I get it, man. I’ll try to do it like this so, thanks :))

  • @Fabianolothor I understand, I’ll try to do as Daniel said, so.

  • 1

    @David I will follow even. Later I give a return with the result.

Show 1 more comment

1 answer

0


I’ll show you a way to get this result:

.container {
	margin-top: 75px;
	position: relative;
}
.line-a {
  border-top: solid 1px;
  width: 250px;
  min-height: 2px;
  position: absolute;
}

.line-b {
  border-top: solid 1px;
   width: 30px;
   min-height: 75px;
   position: absolute;
   left: 276px;
   top: -34px;
   z-index: 1;
   -webkit-transform: rotate(-64deg);
}

.line-c {
   border-top: solid 1px;
   width: 100px;
   top: -26px;
   left: 263px;
   min-height: 2px;
   position: absolute;
}

.ball {
   border: solid 1px;
   width: 7px;
   height: 7px;
   top: -29px;
   left: 362px;
   position: absolute;
   border-radius: 50%;
}
<section class="container">
		<span class="line-a"></span>
		<span class="line-b"></span>
		<span class="line-c"></span>
		<span class="ball"></span>
</section>

  • At first I was doing it anyway! But I was finding a lot of hand. For now I’ll leave it that way. Thanks for the touch Samuel!

Browser other questions tagged html css

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