Top 5 Animation Project
Search Box Animation Project
HTML CODE
<div class="searchbox">
<input type="text" class="searchInput" placeholder="Search">
<button class="searchButton" href="#" >
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
<i class="fal fa-search"></i>
</button>
</div>
CSS CODE
<style>
/* body{
background-image: linear-gradient(to right, #cb2d3e,#ef473a);
}*/
.searchbox {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,50%);
background: #2f3640;
height: 40px;
border-radius: 40px;
padding: 10px;
}
.searchbox:hover > .searchInput{
width: 240px;
padding: 0 6px;
}
.searchbox:hover > .searchButton{
background: white;
color: #2f3640;
}
@media only screen and (min-width:1440px){
.searchbox:hover > .searchInput{
width: 150px;
padding: 0 6px;
}
}
.searchInput {
border: none;
background: none;
outline: none;
float: left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
line-height: 40px;
width: 0px;
}
.searchButton{
color: white;
float: right;
width: 40px;
height: 40px;
border-radius: 50%;
background: #2f3640;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
}
</style>
</html>
PLANETS ANIMATION PROJECT
HTML CODE
<div class="container">
<div class="sun"></div>
<div class="orbit earth">
<div class="globe earth">
<div class="orbit moon">
<div class="globe moon"></div>
</div>
</div>
</div>
</div>
CSS CODE
<style>
body{
background: black;
}
.container{
height: 400px;
width: 400px;
position: relative;
}
.sun{
width: 100px;
height: 100px;
background: yellow;
border-radius: 50%;
box-shadow: 0 0 30px white;
position: absolute;
left: 150px;
top: 150px;
}
.globe.earth{
background: aqua;
height: 30px;
right: 28px;
top: 28px;
width: 30px;
}
.globe.moon{
width: 12px;
height: 12px;
background: #d6d6d6;
right: 2px;
top: 8px;
}
.globe{
border-radius: 50%;
position: absolute;
}
.orbit.earth {
position: relative;
animation: orbit 36.5s linear infinite;
height: 300px;
left: 50px;
top: 50px;
width: 300px;
}
.orbit.moon{
animation: orbit 2.7s linear infinite;
height: 80px;
left: -25px;
top: -25px;
width: 80px;
}
.orbit {
position: relative;
border: solid ;
border-color: white transparent transparent transparent;
border-radius: 50%;
border-width: 1px 1px 0 0;
box-sizing: border-box;
transform: rotate(0deg);
transform-origin: center;
}
@keyframes orbit{
100%{
transform: rotate(360deg);
}
}
</style>
Comments
Post a Comment