Animated Border
HTML CODE:-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <!-- font awesome --> <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" /> </head> <body> <div class="container"> <i class="fa-solid fa-plane"></i> </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: 200px; height: 250px; background: #333; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; } .container i{ color: #222; font-size: 50px; z-index: 10; } .container:hover i{ color: white; filter: drop-shadow(0 0 5px white); } .container::before{ content: ""; position: absolute; width: 50%; height: 150%; background: white; transform: rotate(45deg); } .container::after{ content: ""; position: absolute; inset: 3px; background: #333; border-radius: 10px; } .container:hover::before{ animation: animate 3s linear infinite ; } @keyframes animate{ from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } |