Flying Plane Animation
HTML CODE:-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <title></title> </head> <body> <div class="container"> <div class="icon"> <i class="fa-solid fa-plane"></i> </div> <div class="cloud"> <i class="fa-solid fa-cloud"></i> <i class="fa-solid fa-cloud"></i> <i class="fa-solid fa-cloud"></i> </div> </div> </body> </html> |
CSS CODE:-
body{ padding: 0px; margin: 0px; display: flex; align-items: center; justify-content: center; min-height: 100vh; background: black; } .container{ position: relative; width: 300px; height: 300px; background: skyblue; border-radius: 50%; box-shadow: inset 0 0 50px black; border: 5px solid white; overflow: hidden; } .icon{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items:center; justify-content: center; animation: animate 1s linear infinite; } @keyframes animate{ 0%{ transform: translate(2px,2px); } 50%{ transform: translate(-2px,-2px); } 100%{ transform: translate(2px,2px); } } .icon i{ position: relative; font-size: 100px; z-index: 3; color:white; } .cloud{ position: absolute; inset: 0; } .cloud i{ position: absolute; font-size: 80px; color: #d9d5ed; z-index: 1; animation: animate1 1s linear infinite; } @keyframes animate1{ 0%{ transform: translateX(300px); } 45%,100%{ transform: translateX(-300px); } } .cloud i:nth-child(1){ top: 50px; animation:animate1 1.25s linear infinite; animation-delay: -2s; } .cloud i:nth-child(2){ top: 150px; animation:animate1 1s linear infinite; animation-delay: -1s; } .cloud i:nth-child(3){ top: 100px; animation:animate1 .75s linear infinite; animation-delay: -2.5s; } |