Always add -webkit- before the properties such as transform, animation, transition, @keyframes otherwise these properties don't work in safari.
CSS circular social links
When we hover over the share button, the social links move in a circular path. This is a new animation of links made by web4college.
.circle
Example
<style>
.circle{
width:200px;
height:200px;
background-color:lightblue;
border-radius:50%;
position:relative;
left:200px;
top:200px;
}
</style>
Try </>
Define the dimensions (size and width) of the <div> element that has .circle class.
position:relative; property moves this element relative to the original position.
.class element is at an offset of 200px (from top and left sides) from its original position.
Define background-color temporarily. At the end we'll remove the background-color.
.circle ul
Now we proceed to the next step. And remove the list item markers.
Example
<style>
.circle ul{
list-style-type:none;
}
</style>
.circl ul li
In this step, we place all of the list items at the center. We'll rotate the links like the needle of a watch.
Example
<style>
.circle ul li{
height:50px;
width:50%;
background-color:red;
position:absolute;
left:50%;
top:37.5%; /* 37.5% = (100%-((50px/200px)*100))/2 */
}
</style>
Try </>
The height of the li element is 50px. And the width is 50% of the parent element.
position:absolute; positions the li elements relative to the parent block.
position property stacks all the list items at one place.
The left sides of the list items are 50% away from the left side of .circle class element.
Now what about top property?
It is calculated by subtracting the percentage value of height of current element (li element) from the total percentage of the parent element (.circle). And divide the result by 2.
Define the background-color of the list items so that you can see the behavior of list items.
.circle ul li a
Replace the anchor text with the images. And apply the following CSS properties.
Example
<style>
.circle ul li a{
display:block;
width:50px;
height:50px;
border-radius:50%;
background-position:center;
background-size:52px;
}
</style>
Try </>
Always remember that height and width properties don't work for inline element. That's the reason a element is converted to block level element.
The height and width of a element should be the same as the height of li (50px).
But still the link is not at the center of circular shape.
Align the shared icon at the center
We define position:relative; property to align 'a' element at the center of circular shape.
Remove the href attribute of the link that contains the shared icon as background and apply the cursor property.
Example
<style>
.circle ul li a{
position:relative;
left:-25%; /* 25%=((50px/100px)*100)/2 */
}
</style>
Try </>
Take half of the percentage value of width of 'a' element and move it to the left side.
The percentage value of width is always calculated by dividing the width of the current element by the width of the parent element (50px/100px)*100. Same is the case with the height.
Roatation of list items (<li>)
Now rotate each and every li element by 60 degree more from the previous link.
It is obtained by dividing 360 degree by one less than the total links = 360/(7-1)).
Example
<style>
.circle ul li.s1{
transform:rotateZ(0deg);
transform-origin:left;
}
.circle ul li.s2{
transform:rotateZ(60deg);
transform-origin:left;
}
.circle ul li.s3{
transform:rotateZ(120deg);
transform-origin:left;
}
.circle li.s4{
transform:rotateZ(180deg);
transform-origin:left;
}
.circle li.s5{
transform:rotateZ(240deg);
transform-origin:left;
}
.circle li.s6{
transform:rotateZ(300deg);
transform-origin:left;
}
</style>
Try </>
Every li element is assigned a unique class name. transform property rotates every li element.
addition of :hover pseudo class
Add the :hover pseudo class to move the links along the radii.
Example
<style>
.circle:hover ul li a{
left:50%; /* 50%=100%-(50px/100px)*100 */
animation:Circuling 1 1s;
}
</style>
Try </>
Although the links are moving away from the center but the movement of links is not smooth. So we add an animation Circuling to make it smooth.
@keyframe rule
The @keyframe rule is given below. The animation name is Circuling.
Example
<style>
@keyframes Circuling{
0%{
left:-25%;
}
100%{
left:50%;
}
}
</style>
Try </>
But the one link should not be moved (that has .share class). Fix it as follows.
Example
<style>
.circle:hover ul li a.share{
left:-25%;
animation:none;
}
</style>
Try </>
There should be no animation property and should always be at the center.
Now remove the background-color properties of li element and .class element.
Restore the rotations of a elements
And now restore the rotations of individual links that are caused by li elements.
Example
<li class="s2"><a href="" style="transform:rotateZ(-60deg);"></a></li>
<li class="s3"><a href="" style="transform:rotateZ(-120deg);"></a></li>
<li class="s4"><a href="" style="transform:rotateZ(-180deg);"></a></li>
<li class="s5"><a href="" style="transform:rotateZ(-240deg);"></a></li>
<li class="s6"><a href="" style="transform:rotateZ(-300deg);"></a></li>
Try </>
Remove the background-color of the ul.
If some browser creates a problem running this animation, then add relevant prefix in properties such as transform, transition, animation and @keyframes. For example, we add -webkit- prefix before these properties to work on safari.
Was this article helpful?
