Created
April 9, 2022 12:47
-
-
Save lmas3009/a52266b43a9a111ebbf999bf076f1f6a to your computer and use it in GitHub Desktop.
CSS Navbar Animation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <title>JR Web Dev CSS Animations</title> | |
| </head> | |
| <body> | |
| <h1>Welcome to new video on CSS Animations</h1> | |
| <!-- We are creating a css effect on navbar --> | |
| <div class="lineanima"> | |
| <ul> | |
| <li> | |
| <a href="#">Home</a> | |
| </li> | |
| <li> | |
| <a href="#">About</a> | |
| </li> | |
| <li> | |
| <a href="#">Contact</a> | |
| </li> | |
| <li> | |
| <a href="#">Portfolio</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); | |
| body { | |
| background-color: antiquewhite; | |
| font-family: "Poppins", sans-serif; | |
| } | |
| h1 { | |
| color: red; | |
| font-size: 15px; | |
| } | |
| .lineanima { | |
| height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| } | |
| .lineanima ul { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .lineanima ul li { | |
| list-style-type: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: black; | |
| } | |
| .lineanima ul li a { | |
| position: relative; | |
| text-decoration: none; | |
| } | |
| .lineanima ul li a::before { | |
| position: absolute; | |
| content: ""; | |
| width: 0%; | |
| height: 2px; | |
| bottom: 0; | |
| background-color: brown; | |
| transition: all 0.3s ease-in-out; | |
| } | |
| .lineanima ul li a:hover::before { | |
| width: 100%; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment