导航栏悬浮框页面的制作_导航栏悬浮样式-优快云博客

本文链接：https://blog.youkuaiyun.com/SOLDIER_ON/article/details/134332714

第1关：导航栏制作

box-shadow

box-shadow 可以向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。
语法：box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述

编程要求

1.在li标签属性中添加box-shadow，要求blur为1px，颜色为#470b12，内部阴影。
2.在li标签属性中设置字体背景颜色，要求为#fff

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏悬浮特效</title>
    <style type="text/css">
        ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        ul{
            width:700px;
            height:66px;
            margin:30px auto;
            background:url(https://www.educoder.net/api/attachments/2096019.jpg) no-repeat;
            padding:10px 0 0 210px;
        }
        li{
            width:65px;
            height:27px;
            padding:15px 45px;
            /* ********* Begin ********* */
            box-shadow:-10 -10 1px #470b12;
            /* ********* End ********* */
            float:left;
            margin-left:10px;
            text-align:center;
            font:16px/27px "微软雅黑";
            /* ********* Begin ********* */
            color:#fff;
            color-background:#fff;
            /* ********* End ********* */
        }
    </style>
</head>
<body>
<ul>
    <li>首页</li>
    <li>知识星球</li>
    <li>趣味问答</li>
    <li>奖品</li>
</ul>
</body>
</html>

第2关：导航栏悬浮框制作

transition-property属性

transition-property 属性用于指定应用过渡效果的CSS属性的名称。
语法格式： transition-property: none | all | property;
transition-property属性取值：
在这里插入图片描述

transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。
语法格式： transition-duration:time;

transition-timing-function属性

transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
语法格式： transition-delay:time;（正数:过渡动作会延迟触发。负数：过渡动作会从该时间点开始，之前的动作被截断。）

transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
语法格式： transition：property duration timing-function delay;
注意：使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。

编程要求

1.设置阴影效果box-shadow，要求blur为20px，颜色为#470b12，内部阴影。
2.使用transition属性，要求过度效果为box-shadow，过渡时间1s,过渡效果的速度曲线为linear。
在这里插入图片描述
代码如下

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>导航栏悬浮特效</title>
    <style type="text/css">
        ul,li{
            margin:0;
            padding:0;
            list-style:none;
        }
        ul{
            width:700px;
            height:66px;
            margin:30px auto;
            background:url(https://www.educoder.net/api/attachments/2096019.jpg) no-repeat;
            padding:10px 0 0 210px;
        }
        li{
            width:65px;
            height:27px;
            padding:15px 45px;
            box-shadow:0px 0px 1px 0px #470b12 inset;
            float:left;
            margin-left:10px;
            text-align:center;
            font:16px/27px "微软雅黑";
            color:#fff;
            transition:bos-shadow 1s;
            transition-timing-function:linear;

        li:hover{
            box-shadow:0px 0px 1px 20px #470b12 inset;
        }
        }
    </style>
</head>
<body>
<ul>
    <li>首页</li>
    <li>知识星球</li>
    <li>趣味问答</li>
    <li>奖品</li>
</ul>
</body>
</html>