CSS3过渡

最新推荐文章于 2023-06-28 17:16:00 发布

YourLie_in_April

最新推荐文章于 2023-06-28 17:16:00 发布

阅读量1k

点赞数 1

分类专栏： HTML、CSS 文章标签： css css3

本文链接：https://blog.csdn.net/YourLie_in_April/article/details/124075366

版权

HTML、CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

transition： 过渡属性。（如果两个状态发生改变，没有过渡，效果是瞬间变化的。如果加上了过渡，那么这个过程就会有动画的效果。）

transition-property：过渡或动态模拟的CSS属性。（可以是width,height等，一般使用all）

transition-duration： 完成过渡所需要的时间。（单位s）

transition-timing-function： 指定过渡速度函数。（ linear 线性过渡、ease 平滑过渡、ease-in 由慢到快、ease-out 由快到慢、ease-in-out 由慢到快再到慢。）

transition-delay： 过渡开始出现的延迟时间。（当属性值为正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发、当属性值为负值：元素过渡效果会从该时间点开始显示，之前的动作被截断，速度会变快，相当于瞬间结束过渡所以会出现卡顿、当属性值为 0：元素过渡效果立即执行，为默认值。）

属性值连写：transition: 要过渡的属性花费时间运动曲线何时开始; 例：transition: all 3s ease-in-out 0.5s;表示在始后，经过 0.5s后所有变化属性在3s 内，由慢到快再到慢进行变化。（各个属性值之间使用空格隔开。）

过渡体验：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        div{
            width: 100px;
            height: 100px;
            background: orange;
            transition: all 3s linear 0.5s;
        }
        div:hover{
            background: pink;
            margin-left: 100px;
            margin-top: 100px;
            transform: rotate(90deg) scale(1.5);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

当鼠标放到div盒子上时，向左位移100px，向下位移100px，旋转90度，放大1.5倍，颜色变为粉色。

css3过渡2022-04-10 12-04-28

定位小知识：

有时需要调整元素定位时重叠层的上下位置时，可以设置z-index的属性值：整数，默认值为0。（z-index设置各元素之间的重叠高低关系，越大层级越高。）

YourLie_in_April

关注

1
点赞
踩
0

收藏

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

transition：过渡属性。（如果两个状态发生改变，没有过渡，效果是瞬间变化的。如果加上了过渡，那么这个过程就会有动画的效果。）transition-property：过渡或动态模拟的CSS属性。（可以是width,height等，一般使用all）transition-duration：完成过渡所需要的时间。（单位s）transition-timing-function：指定过渡速度函数。（ linear 线性过渡、ease 平滑过渡、ease-in 由慢到快、ease-out 由快
复制链接

扫一扫