CODEWITHSUNDEEP
css
Kumaresh
Kumaresh

Reputation: 135

Making dashed lines to run using css3

Recently in my project I have came across the image in the link . It is like connecting talented people together in the industry like music, art, singer etc.., . Is it is possible to make the dashed lines to run using CSS3 animation, transition or transform...? If it is how to make that effect.

Upvotes: 0

Views: 3233

Answers (2)

Neograph734
Neograph734

Reputation: 1754

It would be possible, but then you need to consider what happens on different browsers. Css animations are not yet (fully) supported in all browsers. Also css transforms are not fully integrated, so in IE you would see a broken page with some random horizontal lines.

But you want to use this you will need to animate every line individually. Have a look at this website for info on animating http://css3.bradshawenterprises.com/

For 16 lines this would be terrible. But can be done with the code below. 

.line {
 border-top: 1px solid red;
 height: 1px;
}

#line1 {
 position absolute;
 width: 200px;
 -moz-transform:rotate(45deg);
 -webkit-transform:rotate(45deg);
 transform:rotate(45deg);
 -webkit-animation:move_line1 1s infinite;
 -moz-animation:move_line1 1s infinite;
 animation:move_line1 1s infinite;
}

#line2 {
 ...
}

@keyframes move_line1 {
 0% {
  top: 300px;
  left: 300px;
 }
 100% {
  top: 280px; /* Based on the rotation you can calculate the new x and y with sine and cosine */
  left: 280px;
 }
}

@keyframes move_line2 {
 ...
}

You would basically add the following to your html

<div id="line1" class="line> </div>
<div id="line2" class="line> </div>
...

Upvotes: 1

Josh
Josh

Reputation: 615

border: 1px dashed red;

then use other methods of positioning it correctly

Upvotes: 1

Related Questions