CSS的使用（五）——CSS过渡transition

最新推荐文章于 2024-07-25 10:45:42 发布

小羊...

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量341

点赞数 5

文章标签： css 前端

本文链接：https://blog.csdn.net/L_sheep_/article/details/140296501

版权

CSS过渡transition也就是在CSS样式改变时，产生动画效果，变成持续一段时间的变化过程，而不是快速变化的。我们可以对需要变化的属性、过渡的效果、过渡的持续时间等进行设置。

一、过渡触发方式

1、:hover——鼠标悬停触发

2、:active——用户单击鼠标并按住时触发

3、:focus——获得焦点时触发

4、@media触发——符合媒体查询条件时触发

5、点击事件——点击元素时触发

二、过渡的属性

transition-property：选择过渡元素的CSS属性名称。none为不选中，all为所有属性，也可以写属性名并用逗号隔开。

transition-duration：设置过渡的持续时长。默认值为0，单位为秒s。

transition-timing-function：规定过渡的时间曲线。默认值是ease。

属性值	显示效果
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubicbezier(0.42,0,0.58,1)）
cubic-bezier(n,n,n,n)	自己定义值，可能的值是0-1的数值。

transition-delay：规定过渡的开始时间，也就是触发过渡后间隔多长时间再执行效果。默认值为0。给多个属性设置过渡时间时，也是用逗号隔开，与transition-property中的位置相对应。

有一种简写方式“transition:过渡属性持续时间时间曲线过渡延迟,过渡属性持续时间时间曲线过渡延迟”。连写时后两个参数可以省略。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1{
            width: 300px;
            margin: 20px auto;
            border: 5px solid red;
            font-size: 20px;
            font-weight: 500;
            text-align: center;
            color: green;
            /* 过渡效果 */
            /* 选中要过渡的CSS属性 */
            transition-property:width,background-color,color,font-size;
            /* 设置过渡的时长 */
            transition-duration: 2s,5s,8s,1s;
            /* 设置时间曲线 */
            transition-timing-function: linear;
            /* 设置开始的时间 */
            transition-delay: 5s,2s,4s,1s;
            /* 简写格式 */
            /* transition: width 2s linear 5s,background-color 5s linear 2s,; */
        }
        .div1:hover{
            width: 500px;
            background-color: green;
            color: white;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div class="div1">山西农业大学</div>
</body>
</html>

小羊...

关注

5
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS的使用（五）——CSS过渡transition

CSS过渡transition也就是在CSS样式改变时，产生动画效果，变成持续一段时间的变化过程，而不是快速变化的。我们可以对需要变化的属性、过渡的效果、过渡的持续时间等进行设置。
复制链接

扫一扫