CODEWITHSUNDEEP
javascriptphpwordpress
Deep Shah
Deep Shah

Reputation: 97

How can i achieve the animation shown in this video link?

I wanted to achieve animation as shown in this video link. https://drive.google.com/open?id=1nI4csjzv-jlIWORlEkgN5hWM_7qCcZSH

I am new to web development. Can anyone give me some idea to achieve it?

Thanks

Upvotes: 1

Views: 27

Answers (1)

Mosè Raguzzini
Mosè Raguzzini

Reputation: 15831

Just mouse hover on my example to have a snippet to start over, mate:

div {
 display: inline-block;
}

div.line-container, div.circle {
  float:left;
}

div.line-container {
  height: 50px;
  width: 50px;
  position: relative;
}
 
 div.circle {
   background-color: green;
   border-radius: 50%;
   width: 50px;
   height: 50px;
 }

div.line {
  background: #999;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}


div.line2 {
  background: red;
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 1px;
  transition: all 1s;
  z-index: 5;
}

div.container:hover  div.line2 {
  right: 0;
}
<div class="container">
  <div class="circle"></div>
  <div class="line-container">
    <div class="line"></div>
    <div class="line2"></div>
  </div>
  <div class="circle" />
</div>

Upvotes: 3

Related Questions