使用 HTML & CSS 制作菜单悬停效果

最新推荐文章于 2024-03-11 10:43:00 发布

啵雨的博客

最新推荐文章于 2024-03-11 10:43:00 发布

阅读量853

点赞数

分类专栏： HTML+CSS 小demo效果练习

原文链接：https://www.bilibili.com/video/BV17f4y1m7NR?t=239

版权

HTML+CSS 小demo效果练习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

使用 HTML & CSS 制作菜单悬停效果

原视频链接
在这里插入图片描述

HTML：

<!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 href="index.css" rel="stylesheet">
</head>

<body>
    <ul id='menu'>
        <li>
            <a href="">menu1</a>
        </li>
        <li>
            <a href="">menu2</a>
        </li>
        <li>
            <a href="">menu3</a>
        </li>
        <li>
            <a href="">menu4</a>
        </li>
        <li>
            <a href="">menu5</a>
        </li>
    </ul>
</body>

</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

#menu a {
    text-decoration: none;
    color: aliceblue;
    text-transform: uppercase;
    display: inline-block;
    margin: 30px;
    padding: 5px 20px;
    transition: 0.3s linear;
    position: relative;
}

body {
    height: 100vh;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#menu a:hover {
    color: black;
}

#menu a::before,
#menu a::after {
    content: '';
    position: absolute;
    /* position: absolute; 将伪类选择器间接转换为块级元素 还有便于定位*/
    width: 100%;
    height: 0;
    left: 0;
    z-index: -1;
    /* z-index: -1 的作用，当白布遮挡文字时，文字变黑后能显示在白布上端 */
    box-sizing: border-box;
}

#menu a::before {
    border-left: 1px solid white;
    border-right: 1px solid white;
    bottom: 0;
    /* bottom的原因是，当鼠标移至a处，左右两边的白色边框从下端出现 */
    transition: 0.3s linear;
}

#menu a::after {
    top: 0;
    /* top的原因是，当鼠标移至a处，遮挡文字的白布从上方出现 */
    background-color: white;
    transition: 0.3s linear;
}

#menu a:hover::before,
#menu a:hover::after {
    height: 100%;
}

----------------------------------------------------------------------------------------------------
有一些需要注意的点：

vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，但是设置height:100vh，该元素会被撑开屏幕高度一致。
伪类对象的特效通常要使用:hover伪类样式来激活
.test:hover::before 一定要连在一起，中间不要有空格
{ /* 这时animation和transition才生效 */ }
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。