Teach you step by step how to use css3 to create a cool navigation bar effect (detailed code explanation)

In the previous article "Teach you to use css3 to add three-dimensional effects to fonts (with code)", I introduced how to use css3 to add three-dimensional effects to fonts. The following article will introduce to you how to use CSS3 to create a cool navigation bar effect. Let’s see how to do it together.

The cool navigation bar effect is as follows

CSS3 to create a cool navigation bar effect Method

1. Create a new html file. First write the div tag and enter <ul></ul> to call this style item, which is the style defined in the CSS of your website. You can edit the content inside, class is a class selector, and you can control the font color in the web page purely statically.

Code example

<div>
<ul>
    <li><a href="#">首页</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">地图</a></li>
<li><a href="#">游戏</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>

Code effect

2. To set the navigation bar special effects css global setting, add it between the head tags. style css=”text/cssString code and then write the outer margin, inner margin, paragraph setting font in the style tag, heightdefine the height as 2000px.

Code example

body{
margin: 0px;
padding: 0px;
font-family: sans-serif;
height: 2000px;
 
}

3. Next, add a background to the navigation bar and enter the background color, height and width settings innav.

Code example

.nav{
width: 100%;
height: 100px;
background-color: red;
}

Code effect

4. Next, fix the navigation bar to the top of the page.

Code example

.item{
position: fixed;
top:50px;
right:100px;
margin: 0;
padding: 0;
display: flex;

Code effect

5. The image is set as a list item mark in the list.

Code example

.item li{
list-style: none;｝

6. Then add relative positioning, outer margins, inner margins, convert characters to uppercase, color, thickness, underlinedefine a line under the text.

Code example

.item li a{
position: relative;
display: block;
padding: 10px 20px;
margin: 20px 0;
text-decoration: none;
text-transform: uppercase;/*将字符转为大写*/
color: #262626;
font-weight: bold;
/* transition: 0.5s; */｝

7. Use hover mouse pointer floating style

}
.item li a:hover{
color:#fff;
}

Code effect

8. Add edge settings to the navigation bar , use the transition attribute to set the time of the transition effect, use transgorm to lengthen the border twice, and then use opacitythe margin is not displayed.

Code example

.item li a:before{

content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top:1px solid #000;
border-bottom:1px solid #000;
transform: scaleY(2);/*拉长边框两倍*/
opacity: 0;/*边距不显示*/
transition: 0.5s;
z-index: -1;
}
.item li a:hover:before{
transform: scaleY(1);/*拉长边框两倍*/
opacity:1;
 
}
.item li a:after{
content:'';
position: absolute;
top: 1px;
left: 0;
width: 100%;
height: 100%;
background: #000;
transform: scale(0);
transition: 0.5s;
z-index: -1;

9. The last setting, hoverMouse over and change the color to black to add rotation and scaling.

Code example

.item li a:hover:after{ 
transform: scale(1);｝

ok , html css editing code is completed.

Recommended learning: CSS3 video tutorial

The above is the detailed content of Teach you step by step how to use css3 to create a cool navigation bar effect (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!