过渡特效

如果你足够细心,你就会发现,很多组件库中,动态的交互效果都是有过渡的。比如一个按钮,默认为浅绿色,hover时为深绿色,从浅绿到深绿如果能够有一个颜色逐渐过渡的效果,那就太棒了。CSS实现这个功能非常简单,和我们用Flash制作补间动画一样容易。

当然,JavaScript能够实现该功能,但是用CSS更加直接。

实例

我们这里实现一个按钮hover颜色过渡的例子。

<button class="my-btn">按钮</button>
.my-btn {
    background-color: #ff6e66;
    transition: background-color 0.5s;

    /* 为了让按钮美观点,设置的一些不重要的样式,大家不要在意这些细节 */
    color: white;
    font-family: "Microsoft YaHei UI", sans-serif;
    font-size: 1.2rem;
    padding: 0.62rem;
    border: none;
    border-radius: 5px;
    outline: none;
    box-shadow: 0 0 5px 1px #ff6e66;
}
.my-btn:hover {
    background-color: #ff9185;
}

实际上,重点就是transition属性,第一个参数指定过渡效果起作用的属性,第二个参数指定过渡效果发生的时间。

作者:Gacfox
版权声明:本网站为非盈利性质,文章如非特殊说明均为原创,版权遵循知识共享协议CC BY-NC-ND 4.0进行授权,转载必须署名,禁止用于商业目的或演绎修改后转载。
Copyright © 2017-2024 Gacfox All Rights Reserved.
Build with NextJS | Sitemap