Today we learn how to create Circle Animation using Css

Usama Liaquat
Nov 19, 2016
2 min read

Today!

We learn html<>. I am created Rounding circle animation bar using html and CSS. So how do we create it. First thing i am created a new folder. Because all the content html, css, js, images etc must be in to the one folder. When you link some css files you have a some problem where is this css so be careful all files must be in a one folder. So let's have a look what we want to create...

First thing! this is created only in html and css not javascript. Create your html file by opening a notepad++ for what! any editor you want to use. Just save it with with the .html extension. So

just copy this text and paste it in your editor and save this file.

<!DOCTYPE <html>  <html>  <head lang="en">  <meta charset="utf-8">  <title>images_Scrolling</title>  <link rel="stylesheet" type="text/css" href="css/style.css">  </head>  <body>  <div class="circle">Hover me</div>  </body>  </html>

Now its time to create css file. Just create a new file by Ctrl + N and save it in css folder with .css extension like this:

Now! copy this css code and paste it in your css folder.

body{ /* set up body tag settings */ background-color: lightblue; /* set the background color to lightblue */ text-align: center; /* set the text aligment to center */ } /* Closing braces of body tag */ /* drawing a circle */ .circle{ /* setting in the circle class */ width: 100px; /* width is 100px */ padding: 50px 0; /* padding is 50px 0 */ line-height: 0; /* line-height is 0 */ margin: 60px auto; /* margin is 60px auto */ background: pink; /* background is pink */ color: white; /* text color is white */ border-radius: 50px; /* border-radius is 50px all the sides */ cursor : pointer; /* cursor is pointer */ transition: background 1s, transform 0.3s; /* transition of backgroung is in 1s an transfom 0.3s */

} /* closing circle class */ /* animate our circle */ .circle:hover{ /* when mouse it hover what action can do */ background: salmon; /* background is salmon */ transform: rotate(360deg); /* transform rotation is 360 degree */ } /* closing braces of circle:hover */

Thats it!.... Now just go to folder and right click to your html file go to open with select the browser. And here you can see your work perfectly run in your browser.

Thanks!

Have a great day

Credits: Usama liaquat

See our video about this