CSS fluid motion of links

When a user hovers the mouse over navigation bar, the links represent a fluid type motion. padding, margin, position, float, animation properties are used to make fluid type navigation bar.

Example

Place the cursor over the links to see the animation effects.

Try </>

We'll perform the following steps to complete the project.

#fluidMotion ul

Firstly, we'll make a navigation bar.

Example

<style>
#fluidMotion ul{
 width:auto;
 height:auto;
 background:rgba(200,200,200,0.5);
 border-radius:8px;
 padding:30px;
 list-style-type:none;
 float:left;
}
</style>
Try </>
  • list-style-type:none; removes the list item markers from the list.

  • padding is the space around the list items.

  • width and height properties should be set to auto.

  • float:left; must be used so that it covers the links completely.

#fluidMotion ul li

The list items are block level elements. But list items can float in a line afterwards.

Example

<style>
#fluidMotion ul li{
float:left;
}
</style>
Try </>

float:left; property aligns the list items on the left side.

#fluidMotion ul li a

Now we'll design the links.

Example

<style>
#fluidMotion ul li a{
text-decoration:none;
padding:20px;
color:white;
}
</style>
Try </>
  • text-decoration:none; removes the line under the text.

  • padding:20px; is the space around the anchor text.

:hover

When a user hovers the mouse over the link, an animation should be occurred.

Example

<style>
#fluidMotion ul li a:hover{
animation:fluidmotion 0.5s infinite alternate;
}
</style>
Try </>
  • fluidmotion is the name of animation.

  • 0.5s is the animation-duration of the animation.

  • infinite means the animation should occur as long as the user hovers the mouse over the navigation bar.

  • alternate value means that if there is a zoom-in effect in one cycle, then there will be zoom-out effect in next cycle.

Animation

The keyframe rule should be used to make the animation. The animation-duration is divided into five intervals.

Example

<style>
@-webkit-keyframes fluidmotion{
0%{
	animation-timing-function:ease-in;
	zoom:100%;
}
20%{
	zoom:104%;
	animation-timing-function:ease-in;
}
40%{
	zoom:108%;
	animation-timing-function:ease-in;
}
60%{
	zoom:112%;
	animation-timing-function:ease-in;
}
80%{
	zoom:116%;
	animation-timing-function:ease-in;
}
100%{
	zoom:120%;
	animation-timing-function:ease-in;
}

}
</style>
Try </>

The animation-duration of one cycle is 0.5 second. There is zoom-in effect in one cycle, then there is zoom-out effect in the next cycle.

Was this article helpful?

 

Email:

Message: