学习transition基本用法

    CSS中最简单的动画就是transition，使页面元素慢慢的从一种状态变成另外一种状态，从而表现出一种动画的效果。

    transition有四个子属性（可以分别定义）：

    1. transition-property: 过渡属性(默认值为all) ，即什么属性将用动画表现，例如, opacity

    2. transition-duration: 过渡持续时间(默认值为0s)

    3. transiton-timing-function: 过渡函数(默认值为ease函数)

    4. transition-delay: 过渡延迟时间(默认值为0s)

    也可以直接用transition 加上三种属性的合体简写

    写两个小例子来练手

    第一个小例子：鼠标经过导航底部有滑动条效果

    先做好导航条排版，li左浮动

 <nav>
        <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>
            <li><a href="">云学院</a></li>
        </ul>
    </nav>

    然后，li标签设为相对定位，

    设置伪类，用绝对定位，距上方25px，左边20px，li的after属性，content内容为空，设为行内块元素显示，透明度为0（看不到下方滑动条），宽60px高0px，背景颜色为白色，

    transition ，有左到右显示滑动效果，更改width属性，0.2S完成，linear匀速过渡

nav ul li a::after {
            content: "";
            display: inline-block;
            width: 60px;
            height: 0px;
            background-color: #fff;
            position: absolute;
            left: 20px;
            top: 25px;
            opacity: 0;
            transition: width 0.2s linear; 
            
        }

    最后，是鼠标经过时after属性，宽高都显示，透明度为

nav ul li:hover a::after {
            width: 90px;
            height: 3px;
            opacity: 1;
            left: 5px;
            top: 35px;
        }

第二个小例子：雾面拉开的效果

     先将a标签（设置背景图片）用li包裹，li左浮动，排列整齐，

<div class="contain">
    <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>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</div>

    然后，li标签设为相对定位，

    设置伪类，用绝对定位，li的before和after属性，content内容为空，设为块元素显示，宽150px高300px，

    背景为白色，透明度0.4，呈现雾面效果，transform呈现45度角的拉开收回，

    最重要的transition属性，用一秒拉开，ease呈现即慢速开始，然后变快，然后慢速结束的过渡效果

.contain ul li::before, .contain ul li::after {
            content: "";
            display: block;
            width: 150px;
            height: 300px;
            background-color: #fff;
            opacity: 0.4;
            position: absolute;
            transform: rotate(45deg);
            transition: all 1s ease;
        }

最后，li的before和after的绝对定位的位置，和鼠标经过时的位置

.contain ul li::before {
            top: -101px;
            left: -30px;
        }

        .contain ul li::after {
            bottom: -101px;
            right: -30px;
        }

        .contain ul li:hover::before {
            top: -300px;
            left: -90px;
        }

        .contain ul li:hover::after {
            bottom: -300px;
            right: -90px;
        }

    这只揭开了transition的冰山一角，还需要更多的努力进行深入学习，有新的学习再来分享~