CSS3过渡属性（transition）入门——菜单下划线示例

最新推荐文章于 2025-06-02 09:06:24 发布

zpf_2017

最新推荐文章于 2025-06-02 09:06:24 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签： css3 transition

本文链接：https://blog.youkuaiyun.com/zpf_2017/article/details/81557774

本文介绍如何使用CSS3实现平滑的过渡效果，无需依赖Flash或JavaScript。通过具体实例讲解了如何设置过渡属性，包括过渡时长、速度曲线等，并探讨了自定义贝塞尔曲线以获得更佳的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

属性的改变默认是没有过渡效果的，通过添加transition属性我们可以：

设置过渡时长；
调整过渡速度。

下面我将为这个下划线的width添加过渡属性，当下次这个width改变时，将会出现一个过渡效果。

#line {
    margin: 10px auto;
    height: 4px;
    background-color: #4b8bfd;
    width: 0px;
    transition-property: width; /* 选中要添加过渡的元素 */
    transition-duration: 0.2s; /* 设置过渡时间 */
    transition-timing-function: cubic-bezier(0,.83,.72,1.03); /* 规定过渡的时间曲线 */
    transition-delay: 0; /* 规定过渡效果何时开始 */
}

以上用到了所有的过渡属性，也可以使用简写属性：

/*transition: property duration timing-function delay;*/
transition: width 0.2s cubic-bezier(0,.83,.72,1.03);

下面是最有趣的部分——时间曲线（贝塞尔曲线），除了现有的几个时间曲线（linear，ease，ease-in，ease-out,ease-in-out）外，我们还可以手动调整时间曲线来达到你想要的过渡效果。贝塞尔曲线工具

本文示例：一个菜单下划线过渡效果