html5 学习--平滑过渡

最新推荐文章于 2023-08-17 15:31:50 发布

xiaopengyaonixi

最新推荐文章于 2023-08-17 15:31:50 发布

阅读量1.2k

点赞数 1

分类专栏： Html5

本文链接：https://blog.csdn.net/W3Chhhhhh/article/details/52754917

版权

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

语法：transition:[<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>[,<'transition-property'>||<'transition-duration'>||<'transition-timing-function'>||<'transition-delay'>]]*

用法：transition: <过渡的属性> <过渡的时间> <过渡的类型(ease ease-in ...)> <延迟时间>,...(如果有更多用逗号隔开)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color:orange;
            width:400px;
            height:200px;
        }

        div:hover{
            background-color:blue;
            /*定义动画过渡的属性*/
            -webkit-transition-property: background-color;
            -moz-transition-property: background-color;
            -ms-transition-property: background-color;
            -o-transition-property: background-color;
            transition-property: background-color;
            /*定义动画过渡的时间*/
            -webkit-transition-duration: 2s;
            -moz-transition-duration: 2s;
            -ms-transition-duration: 2s;
            -o-transition-duration: 2s;
            transition-duration: 2s;
            /*定义动画延迟触发*/
            -webkit-transition-delay: 1s;
            -moz-transition-delay: 1s;
            -ms-transition-delay: 1s;
            -o-transition-delay: 1s;
            transition-delay: 1s;
            /*定义动画的过渡效果:
            ease:缓解效果，linear：线性效果；
            ease-in：渐显效果；ease-out:渐隐效果;
            ease-in-out:渐显渐隐效果;cubic-bezier:特殊的立方贝塞尔曲线效果*/
            -webkit-transition-timing-function: ease-in-out;
            -moz-transition-timing-function: ease-in-out;
            -ms-transition-timing-function: ease-in-out;
            -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

xiaopengyaonixi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5 学习--平滑过渡

语法：transition:[||||||[,||||||]]*用法：transition: ,...(如果有更多用逗号隔开) Title div{ background-color:orange; width:400px; height:200px;
复制链接

扫一扫