编程知识 cdmana.com

3D navigation bar of front end small cases

Simple 3D Navigation bar cases - The bottom box rotates as the mouse passes through it

The front end of recent introductory learning uses simple html Structural plus CSS It's a style 3D Here are some small cases of navigation bar .


One 、 Case introduction ?

The effect is as follows :
 Insert picture description here

The case is mainly in a navbar There are a few in the navigation box li, Every li It contains a span Notes and a link , This span The label is initially facing us , When we use the mouse to go through this li Below span when , Just take the following a Note that is, the link is rotated up, and you can set the link, which interface you need to jump to .

Two 、 Case code

1.HTML structure

The code is as follows :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="navbar">
        <li>
            <div class="case">
                <span class="front"> home page </span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 1</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 2</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 3</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 4</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 5</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 6</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 7</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 8</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 9</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 10</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 11</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
        <li>
            <div class="case">
                <span class="front"> Subpage 12</span>
                <a href="#" class="bottom"> Get into </a>
            </div>
        </li>
    </ul>
</body>

</html>

2.CSS style

The code is as follows :

/*  Clear inner and outer margins  */
* {
   
    
    margin: 0;
    padding: 0;
}

.navbar {
   
    
    width: 1200px;
    height: 34px;
    margin: 100px auto;
    border: 1px solid rgba(0, 0, 0, .3);
    /*  Border settings  */
    border-radius: 10px;
}

.navbar li {
   
    
    float: left;
    margin: 0 5px;
    width: 80px;
    height: 34px;
    font-size: 13px;
    list-style: none;
    /*  Give Way li All the sub boxes below have a perspective effect  */
    perspective: 600px;
}

.navbar li a {
   
    
    /*  Remove the underline below the entry link  */
    text-decoration: none;
}

.case {
   
    
    position: relative;
    width: 100%;
    height: 100%;
    /*  Make the text on the subbox appear in the center  */
    text-align: center;
    line-height: 34px;
    /*  Because of the setting of the element 3D effect , If the parent does not add this attribute here, the child's 3D The effect doesn't show up  */
    transform-style: preserve-3d;
    /*  Add a spin transition effect  */
    transition: all .6s;
}

.case:hover {
   
    
    /*  After that, the box rotates 90 Degrees show the box below  */
    transform: rotateX(90deg);
}

.front,
.bottom {
   
    
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.front {
   
    
    /* z-index  Property specifies the stacking order of an element , Make the stacking order of boxes that need to be initially displayed higher . */
    z-index: 1;
    /*  Move in front of us so it's positive and move half the height of the box so that it can rotate around the center point  */
    transform: translateZ(17px);
    color: #666;
}

.bottom {
   
    
    /*  It has to be negative if it goes forward, because if the box font at the bottom is facing us  */
    /*  Go down half the height  */
    /*  If there is movement or other styles, we must first write our movement  */
    transform: translateY(17.5px) rotateX(-90deg);
    color: orange;
}

Here is the separation of structure and style, and the above CSS The style is named style.css And then use link Import to html You can use , You can also use patterns with style The label says html In the file title Next .


summary

I haven't been learning the front end for a long time , I want to share the small cases I learned every day , I hope you can give me some advice on the bad writing .

版权声明
本文为[osc_ z9jr2tjo]所创,转载请带上原文链接,感谢
https://cdmana.com/2020/12/20201225094529775P.html

Scroll to Top