初步入门css过渡
# css过渡

我们可以使用css过渡实现许许多多的动画效果,我们经常搭配着:hover使用

简写方式transition:<要过渡的属性> <过渡的时间> <时间曲线(可以省略)> <何时开始(可以省略)>;

过渡属性**transition-property**

过渡的属性可以使css样式里任意的属性值,颜色,边距,宽度都可以,如果都像变化,那么写一个all即可。

过度时间transition-duration

transition-duration 属性以秒或毫秒为单位指定过渡动画所需的时间。默认值为 0s ,表示不出现过渡动画。

时间曲线transition-timing-function(可以省略)

时间曲线有:ease(默认) ,

transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)

何时开始transition-delay(可以省略)

CSS的transition-delay属性规定了在过渡效果开始作用之前需要等待的时间。

值以秒(s)或毫秒(ms)为单位,表明动画过渡效果将在何时开始。取值为正时会延迟一段时间来响应过渡效果;取值为负时会导致过渡立即开始。

如何使用

口诀: 谁做动画给谁加;
比如实现如下效果

动画

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
            /* 变化的宽度 时间1s */
            transition: width 1s;
        }

        div:hover {
            width: 400px;
        }
    </style>
<body>
    <div></div>
</body>

如果想多个属性变化

可以用逗号隔开

transition: width 1s,height 1s;

在这个情况下我们只定义width和height 所以我们可以用all代替

练习——制作一个进度条

进度条

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .bar {
            width: 150px;
            height: 15px;
            border: 1px solid purple;
            border-radius: 7px;
            margin: 100px auto;
        }

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

        .bar:hover .bar_in {
            width: 100%;
        }
    </style>
<body>
    <div class="bar">
        <div class="bar_in"></div>
    </div>
</body>

结语

放假咸鱼的第12天
微信

本文由 越行勤 创作,如果您觉得本文不错,请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
原文链接:https://yingwiki.top/2021/01/06/css-guo-du
最后更新于:  120  天前,内容可能已经不具有时效性,请谨慎参考。

Q.E.D.


努力学习的小菜鸟