CSS Creative Ball Animation.Today in this blog , we gonna learn about css creative ball animation tutorial using only html & css.
CSS Creative Ball Animation
Hi Friends!
Today in this blog, we gonna learn about CSS creative ball animation tutorial using only HTML & CSS. This is one of my best CSS animation effects. But, This is very easy to code. in the previous blog, we will learn about CSS Profile Card UI Design and this blog will help you for more understanding about CSS main concepts and more tricks. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css creative ball animation</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="circle1"></div>
<div class="circle2"></div>
<div class="box1">
<span></span>
<span></span>
</div>
<div class="box2">
<span></span>
<span></span>
</div>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension . HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100%;
background-color: #262626FF;
}
.circle1{
display: block;
position: absolute;
left: 35%;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.circle2{
display: block;
position: absolute;
left: 45%;
height: 300px;
width: 300px;
border: 50px solid black;
border-radius: 50%;
}
.box1{
display: block;
position: absolute;
left: 35%;
height: 50px;
width: 300px;
animation: anime 2s linear infinite;
}
.box2{
display: block;
position: absolute;
left: 45%;
height: 50px;
width: 300px;
animation: anime 2s linear 0.5s infinite;
}
span{
display: block;
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
}
span:nth-child(1){
top: 0;
left: 0;
background: linear-gradient(45deg,coral,yellow);
box-shadow: 1px 1px 60px yellow,
1px 1px 60px yellow;
}
span:nth-child(2){
top: 0;
right: 0;
background: linear-gradient(45deg,limegreen,lime);
box-shadow: 1px 1px 60px lime,
1px 1px 60px lime;
}
@keyframes anime{
100%{
transform: rotate(360deg);
filter: hue-rotate(360deg);
}
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully for your knowledge and repeat the code for your practice this practice will motivate you to build more different animations with your own creativity. This video is helpful for learning effectively. these types of animation effects are very useful to create a next-level websites. I hope this tutorial will be helpful to learn this ball animation. I will give you Source Code and you can download it.
COMMENTS