Hi dear welcome to "CodePrime" Blog . In this post YOU are going to learn how to make a background moving css animation using html and css. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE and pest it then open the index.html file with your browser.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>circle img animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<img src="/img/circle-img.png" class="circle">
<img src="/img/datax-img.png" class="mine">
</div>
</body>
</html>
CSS
body{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
background: #e4e4f8;
}
.container{
width: 500px;
height: 500px;
position: relative;
/* background: red; */
}
.container img.circle{
width: 100%;
animation: circle 9s linear infinite;
transition: 0.5s;
}
@keyframes circle {
100%{
transform: rotate(360deg);
}
}
.container img.mine{
position: absolute;
width: 95%;
left: 15px;
top: 10px;
}
0 Comments