css如何实现属性过渡的效果

最新推荐文章于 2024-10-03 05:45:00 发布

诺坎普的风间

最新推荐文章于 2024-10-03 05:45:00 发布

阅读量257

点赞数

分类专栏：前端只因变凤凰之路文章标签： css3 前端 css css过渡

本文链接：https://blog.csdn.net/weixin_62588253/article/details/130032318

版权

前端只因变凤凰之路专栏收录该内容

50 篇文章 2 订阅

订阅专栏

所谓属性过渡，就是从一个属性变到另一个属性。例如下面的进度条

我们之前学过的就是:hover，但是这个是瞬间变化的，看上去不够美观。我们可以通过transition属性来控制变化的具体效果如何时开始变化、变化哪些属性等。

语法

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

1.属性：想要变化的css属性，宽度高度、背景颜色、内外边距都可以。如果想要所有属性都变化过渡，可以添加all

2.花费时间：多久完成变化，单位是秒（必须写）

3.运动曲线：默认是ease（一般不用管）

4.何时开始：单位是秒（必须写），可以设置延迟触发时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
        }

        .bar_in {
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
            transition: all, .7s;
        }

        .bar_in:hover {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>

</body>

</html>

怎么样，你学会了吗？