Css3 creates a cool navigation bar and css3 cool navigation bar

Css3 creates a cool navigation bar and css3 cool navigation bar

Today, we mainly use the hover selector. Move the mouse over to view the effect.

I. General navigation bar

• Home
• Content
• Service
• Team
• Contact

 

 

For this normal navigation bar, the color changes when the mouse slides over, so the idea becomes very simple.

(1) Use ul label Layout

(2) move the mouse over the event

<div id="demo1">        <ul>            <li>Home</li>            <li>Content</li>            <li>Service</li>            <li>Team</li>            <li>Contact</li>        </ul>    </div>

*{    padding:0;    margin:0;    list-style:none;    text-decoration:none;}a{    color:#fff;}#demo1{    width:600px;}#demo1 ul li{    float:left;    width:100px;    height:50px;    text-align:center;    background:#ccc;    line-height:50px;    color:#FFF;}#demo1 ul li:hover{    background:#999;}

(2) Brackets navigation bar

• Home
• Content
• Service
• Team
• Contact

The layout of the navigation bar is not mentioned here. We can see that brackets appear in the text when the mouse passes. The idea is as follows:

(1) When no mouse goes through the event, there are actually some parentheses, but not many of them are invisible in the middle of the text

(2) When the mouse passes, the brackets move from the center to the two sides, and change from invisible to display.

 <div id="demo2">        <ul>            <li><a href="#">Home</a></li>            <li><a href="#">Content</a></li>            <li><a href="#">Service</a></li>            <li><a href="#">Team</a></li>            <li><a href="#">Contact</a></li>        </ul>    </div>

#demo2{    width:600px;    height:50px;    margin:20px auto;}#demo2 ul li{    position:relative;    float:left;    width:100px;    height:50px;    text-align:center;    line-height:50px;    background:#000;}#demo2 ul li a:before{    content:"[";    margin-right:10px;    transform:translateX(20px);    -webkit-transform:translateX(20px);    -moz-transform:translateX(20px);    -ms-transform:translateX(20px);    }#demo2 ul li a:after{    content:"]";    margin-left:10px;    transform:translateX(-20px);    -webkit-transform:translateX(-20px);    -moz-transform:translateX(-20px);    -ms-transform:translateX(-20px);}#demo2 ul li a:before,#demo2 ul li a:after{    display:inline-block;    opacity:0;    transition:transform 0.3s, opacity 0.2s;    -moz-transition:transform 0.3s, opacity 0.2s;    -webkit-transition:transform 0.3s, opacity 0.2s;    -ms-transition:transform 0.3s, opacity 0.2s;}#demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after {    opacity: 1;    -webkit-transform: translateX(0px);    -moz-transform: translateX(0px);    transform: translateX(0px);}

3. Slide navigation bar

• Home
• Content
• Service
• Team
• Contact

 

 

Pay attention to the following two points from the demonstration effect:

(1) move the mouse horizontally from top to bottom

(2) When the mouse passes, the text goes from top to bottom and the color is changed

This is very similar to the previous example.

(1) the horizontal line actually exists, but when the mouse does not pass through the text, it is above and transparent, and when the mouse passes through the horizontal line, it goes from top to bottom.

(2) Here we need to define an animation, because it represents three states when the mouse passes through:

① Draw the text from the current position

② Text appears above

③ Text slides from top to current position

 <div id="demo3">        <ul>            <li><a href="#"><span>Home</span></a></li>            <li><a href="#"><span>Content</span></a></li>            <li><a href="#"><span>Service</span></a></li>            <li><a href="#"><span>Team</span></a></li>            <li><a href="#"><span>Contact</span></a></li>        </ul>    </div>

#demo3 ul li{    float:left;    margin:0 25px;    position:relative;}#demo3 ul li a{    color:#D8761E;    font-family:'Righteous', cursive;    display:block;    padding:10px 0;}#demo3 ul li span{    display:block;}#demo3 ul li a:before{    content:"";    position:absolute;    width:100%;    height:3px;    background:#D8761E;    bottom:0;    opacity:0;    -webkit-transform: translate3d(0, -40px, 0);    transform: translate3d(0, -40px, 0);    -webkit-transition: -webkit-transform 0s 0.3s, opacity 0.2s;    transition: transform 0s 0.3s, opacity 0.2s;}#demo3 ul li a:hover::before{    opacity:1;    -webkit-transform: translate3d(0, 0, 0);    transform: translate3d(0, 0, 0);    -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;    transition: transform 0.5s, opacity 0.1s;    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }#demo3 ul li a:hover span{    color:#510301;    -webkit-animation: anim-francisco 0.3s forwards;    animation: anim-francisco 0.3s forwards;}@-webkit-keyframes anim-francisco {    50% {        opacity: 0;        -webkit-transform: translate3d(0, 100%, 0);        transform: translate3d(0, 100%, 0);    }    51% {        opacity: 0;        -webkit-transform: translate3d(0, -100%, 0);        transform: translate3d(0, -100%, 0);    }    100% {        opacity: 1;        -webkit-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);    }}@keyframes anim-francisco {    50% {        opacity: 0;        -webkit-transform: translate3d(0, 100%, 0);        transform: translate3d(0, 100%, 0);    }    51% {        opacity: 0;        -webkit-transform: translate3d(0, -100%, 0);        transform: translate3d(0, -100%, 0);    }    100% {        opacity: 1;        -webkit-transform: translate3d(0, 0, 0);        transform: translate3d(0, 0, 0);    }}

Note that you cannot set the width and height for the label, because setting the width and height will affect the text sliding route, which is exaggerated. This is also the reason why span is added. When the mouse passes through a, the span slides with reference to.

The labels in it will not be explained, so it will be better to check the results by yourself.

I am so helpless. I cannot cancel the display effect a label and the default li style. Can someone tell me why/(∩ o workflow )/~~ However, if you compile it yourself, it is normal in the browser.