过渡

最新推荐文章于 2024-04-25 16:16:15 发布

浩哥学习编程之路

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量60

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/m0_46978034/article/details/115529447

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

过渡，可以使一个属性的值经过一段时间变成另一个值经常配合：hover来使用过渡写在自身上
语法：

  transition：属性值

属性值	描述
transition-property：	all 表示所以得属性都会被进行过渡多个属性之间用逗号隔开
transition-duration：	过渡持续的时间单位 s秒 ms毫秒 1秒=1000毫秒
transition-delay：	过渡的延时几秒过后开始
transition-timing-function	过渡类型如下

 transition-timing-function 属性如下

属性值	描述
linear	线性过渡(匀速运动)
ease	平滑过渡(慢加速，速度越快增加越慢)
ease-in	由慢到快
ease-out	又快到慢
ease-in-out	又慢到快再到慢
steps(数字，end)	分步走，根据宽度自动计算，end是等一下在走
steps(数字，start)	分步走，根据宽度自动计算，start是马上走
cubic-bezier(p1,p2,p3,p4)	可以通过贝塞尔曲线来指定运动曲线比如(.32，.1.86，.43，.-0.33) 可以进入www.cubic-bezier.com搜索网站具体查看数值

过渡得简写

transition：/*属性名*/  /*持续时间*/  /*过渡类型*/  /*过渡延迟*/;

代码演示

    <style>
        .box1 {
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: red;
            transition: all 2s;
        }
        
        .box1:hover {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
</body>

</html>

没过度之前
在这里插入图片描述

过度之后的
在这里插入图片描述
思维导图

浩哥学习编程之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
过渡

过渡，可以使一个属性的值经过一段时间变成另一个值经常配合：hover来使用过渡写在自身上语法： transition：属性值属性值描述transition-property：all 表示所以得属性都会被进行过渡多个属性之间用逗号隔开transition-duration：过渡持续的时间单位 s秒 ms毫秒 1秒=1000毫秒transition-delay：过渡的延时几秒过后开始transition-timing-function过渡类型如下
复制链接

扫一扫