CSS3 过渡transiton

最新推荐文章于 2024-07-19 15:50:46 发布

xiao666yan

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量116

点赞数

分类专栏： Web学习文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_51325652/article/details/131464549

版权

Web学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在这里插入图片描述

过渡属性transition-property

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        
    </div>
</body>
<style>
   div{
    display: inline-block;
    width: 300px;
    height: 200px;
    background-color: beige;
    transition-property: height;
    transition-duration: 0.5s;
    
    /* transition-timing-function: linear;匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
}
   div:hover{
    height: 500px;
   }

</style>
</html>

过渡时间transition-duration

在这里插入图片描述

过渡方式transition-timing-function

/* transition-timing-function: linear;匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id = "a">匀速</div>
    <div id = "b">变慢</div>
    <div id = "c">加速</div>
    <div id = "d">先加再减</div>
    <div id = "e">减速</div>
</body>
<style>
   #a{
    
    width: 300px;
    height: 100px;
    background-color: beige;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: linear;/*匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
    }
    #b{
   
    width: 300px;
    height: 100px;
    background-color: beige;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease;/*匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
}
#c{
   
    width: 300px;
    height: 100px;
    background-color: beige;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in;/*匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
}
#d{
    
    width: 300px;
    height: 100px;
    background-color: beige;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;/*匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
}
#e{
    
    width: 300px;
    height: 100px;
    background-color: beige;
    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-out;/*匀速  ease(逐渐变慢)，ease-in(加速)，ease-out(减速)，ease-in-out(加速后减速)，cubic-bezier(n,n,n,n)贝塞尔曲线 */
}
   #a:hover{
    width: 700px;
   }
   #b:hover{
    width: 700px;
   }
   #c:hover{
    width: 700px;
   }
   #d:hover{
    width: 700px;
   }
   #e:hover{
    width: 700px;
   }

</style>
</html>

延时时间transition-delay

在这里插入图片描述

transition-delay: 3s; /*等待3s再过渡*/

简写形式

在这里插入图片描述

transition: all,0.5s,linear,0.5s;

xiao666yan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 过渡transiton

CSS3 过渡元素transition
复制链接

扫一扫

专栏目录

CSS3 过渡transiton

过渡属性transition-property

过渡时间transition-duration

过渡方式transition-timing-function

延时时间transition-delay

简写形式

“相关推荐”对你有帮助么？