navbar

视频来源：https://www.bilibili.com/video/BV17f4y1y7QH?spm_id_from=333.999.0.0

https://space.bilibili.com/478490349?spm_id_from=333.788.b_765f7570696e666f.2

介绍

HTML+CSS 完成伸缩式导航栏

说明

1.渐变色：linear-gradient

2.transform 属性

rotate 旋转

transform:rotate(-45deg);

3. 动画过度：transition

transition:all 0.5s;

transition: all .4s ease-in-out .3s;

transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s; 先执行top 属性，在执行 transform 属性

top:calc(50% - 2px);/* 2个span top 都是 偏移 2px,因为，变更后是一个 X 中心点是 在一起的，只是旋转角度方向不一样 */
transform:rotate(-45deg);/*选中角度*/
background-color: #fb7299;
transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;

4.calc属性

top:calc(50% - 2px);/* 注意 符号前后 都有空格*/

5. nth-child 属性

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。

<div class="navbar">
    <input type="checkbox">
    <span></span>
    <span></span>
</div>
// 表示 第一个 span
.navbar input:checked ~ span:nth-child(2){
    
}

navbar下 input 同级节点 span标签，的父节点 下 第2个元素

6.cursor: pointer;

7.overflow: hidden;

8.white-space: nowrap;

9.pointer-events: none;

vscode 创建html

1. ! + 回车 快速创建html
2. .navber>input:checkbox+span*2+ul>li*5>a 快速创建 标签

[CSS 选择器](../CSS/CSS.md#CSS 选择器)

>子元素，同父级

+选择紧接在另一个元素后的元素，而且二者有相同的父元素

<div class="navber">
        <input type="checkbox" name="" id="">
            <span></span>
            <span></span>
            <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>
            </ul>
        </input>
    </div>

./效果视频.mp4

<video id="my-video" class="video-js" controls preload="auto" width="100%"
 data-setup='{"aspectRatio":"16:9"}'>
    <source src="./效果视频.mp4" type='video/mp4'>
</video>