css3多边框-CSS3实现过渡动画效果【前端技术文章】

什么是过渡？ 过渡是 CSS3 中的颠覆性功能之一，我们可以在元素从一种样式更改为另一种样式时为其添加效果，而无需使用 Flash 动画或 JavaScript。

过渡动画：是从一种状态逐渐过渡到另一种状态，可以让我们的页面看起来更好，更有动感，虽然低版本浏览器不支持（ie9以下版本），不会影响页面布局。 如今，过渡动画经常与 :hover 选择器一起使用。

句型：

transition: 要过渡的属性花费时间运动曲线何时开始;

使用 CSS3 过渡

1.属性：你要改变的css属性css3多边框，长度、高度、背景色、内外行距都可以使用。 如果你想让所有属性都改变和过渡，你可以写全部。

2、耗时：单位是秒（单位必须写出来），比如0.5s。

3、运动曲线：默认为ease（可省略）。

4、何时启动：单位为秒（单位必须写出）。 延迟触发时间可设置css3多边框，默认0s（可省略）。

进度条案例

步：

- 创建两个div包，属于嵌套关系，内部类名为bar，内部类名为bar_in

- 设置内条袋的边框、宽度和高度以及圆角边框

- 设置内层bar_in的初始测试长度、背景颜色、过渡效果

- 在内栏添加悬停波，当触发悬停波时，让内栏的bar_in改变长度

代码：

    ...
    
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
            padding: 1px;
        }
        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            /* 谁做过渡给谁加 */
            transition: all .7s;
        }
        .bar:hover .bar_in {
            width: 100%;
        }