How to create this effect / animation

Question

How to create this effect / animation

Navigation

#1 by (0 votes)

0

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

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

html css

asked by anonymous 13.07.2017 / 05:29

1 answer

Images appear on localhost, but not online server How to catch events from a drag and move to php

score 0 · Accepted Answer

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>