CSS3渐变过渡语法交互效果示例

过渡是我在项目中使用最多的功能！相信这是很多人用得最多的例子！我一般用这个来让一些交互效果（主要是悬停动画）更加生动，不那么生硬！好啦，我们进入正文吧！

引用一个初学者的教程：CSS3过渡是元素从一种样式逐渐变为另一种样式。要实现此目的，需要指定两件事： 设置将应用效果的 CSS 属性 设置效果的持续时间。

2-1 语法

transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

方框 1

/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition：width,.5s,ease,.2s

方框 2

/*所有属性从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒*/
transition：all,.5s

上面的方框是缩写方式，各个属性也可以单独写（下面不再赘述） 2-2 示例 -悬停效果

上面的两个按钮，第一个使用过渡，第二个不使用过渡。您会看到差异。使用过渡后，就没有那么生硬了。有一个变化的过程似乎更有活力。
当然，这是最简单的转换示例，两个按钮的样式代码。唯一的区别是第一个按钮有一个转换代码 transition: all .5s;

2-3 示例-下拉菜单

对于上面的两个菜单，第一个不使用转换，而第二个使用过渡。您可以清楚地看到差异，并且使用过渡时看起来更舒服！代码的不同之处在于transition-ul的顶部元素（父元素）有一个类名（ul-transition）。用这个类名来定义 ul .ul-transition ul{transform-origin: 0 0;transition: all .5s;}

可能你不知道我在说什么！我贴出代码

html

<div class="demo-hover demo-ul t_c">
    <ul class="fllil">
        <li>
            <a href="javascript:;">html</a>
            <ul>
                <li><a href="#">div</a></li>
                <li><a href="#">h1</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">js</a>
            <ul>
                <li><a href="#">string</a></li>
                <li><a href="#">array</a></li>
                <li><a href="#">object</a></li>
                <li><a href="#">number</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">css3</a>
            <ul>
                <li><a href="#">transition</a></li>
                <li><a href="#">animation</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">框架</a>
            <ul>
                <li><a href="#">vue</a></li>
                <li><a href="#">react</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>
<div class="demo-hover demo-ul ul-transition t_c">
    <ul class="fllil">
        <li>
            <a href="javascript:;">html</a>
            <ul>
                <li><a href="#">div</a></li>
                <li><a href="#">h1</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">js</a>
            <ul>
                <li><a href="#">string</a></li>
                <li><a href="#">array</a></li>
                <li><a href="#">object</a></li>
                <li><a href="#">number</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">css3</a>
            <ul>
                <li><a href="#">transition</a></li>
                <li><a href="#">animation</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:;">框架</a>
            <ul>
                <li><a href="#">vue</a></li>
                <li><a href="#">react</a></li>
            </ul>
        </li>
    </ul>
    <div class="clear"></div>
</div>

css

.demo-ul{margin-bottom: 300px;}
    .demo-ul li{
        padding: 0 10px;
        width: 100px;
        background: #f90;
        position: relative;
    }
    .demo-ul li a{
        display: block;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .demo-ul li ul{
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0;
        transform: scaleY(0);
        overflow: hidden;
    }
    .ul-transition ul{
        transform-origin: 0 0;
        transition: all .5s;
    }
    .demo-ul li:hover ul{
        transform: scaleY(1);
    }
    .demo-ul li ul li{
        float: none;
        background: #0099ff;

}

可以说，上面两个是非常简单的transition的用法。使用过渡是灵活且强大的。结合js，可以轻松实现各种效果（焦点图、手风琴）等，还有很多意想不到的效果。这取决于每个人！

作者：翔外