Hello readers we are back with another interesting post. This post is based on the topic of HTML and CSS.Hope all are doing well and safe. Explore all the contents of our blog and support us.
In this post we are going to learn how to code a multi glowing animated navigation using HTML and pure CSS.We are going to learn about the appearance of it and how to code it.
What is a Navigation bar?
A navigation bar is a section in the website which allows you to navigate or reach different parts of the website by simply tapping on them. A attractive navigation will enable a friendly and smooth interface.
What does the Navigation contain and how does it behave?
- Buttons which acts as links
- Buttons Glowing.
- Rotating on hover.
- Multi color glowing on hover.
You might like these:
video for understanding.
I have explained the code clearly in the blog. For the preview of the appearance of the navigation and coding kindly watch the video below.
HTML:
The HTML file here is very small and simple. All it contains is just the buttons.All the buttons are written within the "nav" class Navigation is done using the buttons here so we created five buttons using the "button" tag and named the buttons as names for the links
CSS:
The main part in this navigation is played by the CSS. For the buttons the "display" property is set to "block" so that each button will appear in a new line, before using the display property all the buttons were displaying in the same line.
The "top-margin" is set to 20px so that there will be notable distance between the buttons. Top and bottom padding is set to 10px and right and left padding to 40px. The width is set to 200px.
The border is set to 2px with a color specified . The box-shadow's color is also set to the same color as the border color. The same color box-shadow is given so that it will appear as to be glowing in the black background.
The "transition" is set to 1s for the transform property so that the transformation takes place within 1 second.
The "nav" class is made to float left and the position is set to "sticky" so the navigation will remain in the same place on scrolling.
Now the properties for the button when it is hovered. The transform property is set to rotateY(360 deg). So that the button will rotate 360 degree along the Y axis . If rotateX() the button would have rotated along X axis.
Now the multi-color glowing part animation. The animation-name is named as "shift" and the duration is set to 1 second using animation-duration . animation-iteration-count is set to "infinite" so that the animation would take place infinite number of times.
Now coming to the part of animation. The animation is done by specified by specifying @keyframes shift in the beginning. Now inside this at 0% i.e. 0th second the background-color and other properties are set to value. And at 50% i.e.0.5th second the background-color and other properties. Same is done at the 100% i.e. 1st second the same is done. Doing this the colors will be changing and appears as if glowing.
Post a Comment