CSS3新增属性——过渡

最新推荐文章于 2024-08-17 16:12:38 发布

辣味蓓蓓酱

最新推荐文章于 2024-08-17 16:12:38 发布

阅读量125

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_43623147/article/details/111230234

版权

CSS3过渡

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

属性：想要变化的CSS属性，宽度高度、背景颜色、内外边框都可以。如果想要所有属性都变化过渡，写一个all就可以。
花费时间：单位是秒（必须写单位）比如0.5s
运动曲线：默认是ease（可以省略）
何时开始：单位是秒（必须写单位）可以设置延迟出发时间，默认是0s（可以省略）

<style>
    div {
        width: 200px;
        height: 100px;
        background-color: pink;
        transition: width .5s;
        /* 如果想要多个属性发生变化，利用逗号进行分割 */
        transition: width .5s,height .5s;
        /* 如果想要所有属性都变化，属性写all即可 */
        transition: all .5s;       
}
}
    div:hover {
        width: 400px;
        height: 200px;
}
</style>
<body>
    <div></div>
</body>

进度条案例

当鼠标放在进度条上，红色填充变满。

<style>
    .bar{ 
        width: 150px;
        height: 15px;
        border: 1px solid red;
        border-radius: 7px;
}
    .bar_in {
        width: 50%;
        height: 100%;
        background-color: red;
        transition: all .7s;
}
    .bar_in:hover{
        width: 100%
}
</style>
<body>
    <div class="bar">
        <div class="bar_in">
        </div>
    </div>
</body>

辣味蓓蓓酱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3新增属性——过渡

CSS3过渡transition:要过度的属性花费的时间运动曲线何时开始;属性：想要变化的CSS属性，宽度高度、背景颜色、内外边框都可以。如果想要所有属性都变化过渡，写一个all就可以。花费时间：单位是秒（必须写单位）比如0.5s 运动曲线：默认是ease（可以省略）何时开始：单位是秒（必须写单位）可以设置延迟出发时间，默认是0s（可以省略）<style> div { width: 200px; height: 100px;
复制链接

扫一扫