CSS3新增属性——过渡和动画（2D属性，3D动画）

最新推荐文章于 2024-09-29 23:45:12 发布

芋泥丶

最新推荐文章于 2024-09-29 23:45:12 发布

阅读量3.1k

点赞数 6

分类专栏：前端文章标签： css3 动画 3d

本文链接：https://blog.csdn.net/m0_53619602/article/details/125151651

版权

本文深入介绍了CSS3中的过渡和动画特性，包括过渡的属性、时间、曲线和开始时间，2D属性如translate、rotate、scale及transform-origin的详细说明，以及3D动画的三维坐标系、translate3d、perspective和3D旋转等概念，旨在帮助开发者更好地理解和应用CSS3动画效果。

摘要由CSDN通过智能技术生成

4. transform-origin（转换中心点）

5. 3D呈现（transform-style：400px）

CSS3

CSS3的语法是建立在CSS原先版本基础上的，它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的，只是在之前的版本中没有得到广泛的应用。

一、过渡

我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样时为元素添加效果。

过渡动画:是从一个状态渐渐的过渡到另外一个状态

我们现在经常和:hover 一起搭配使用。

transition: 要过渡的属性花费时间运动曲线何时开始;

1. 属性

想要变化的Css属性，宽度高度背景颜色内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以

2. 花费时间

单位是秒(必须写单位)比如0.5s

3. 运动曲线

默认是ease (可以省略)

linenr 匀速
eare 逐渐慢下来
eaer in 加速
eaer out 减速
eae-in- out 先加速后减速

4. 何时开始

单位是秒(必须写单位)可以设置延迟触发，时间默认是0s ( 可以省略)

案例演示：

<!DOCTYPE html>
<html lang="en">

<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>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s linear .5s;
        }

        .box:hover {
            width: 400px;
        }
    </style>
</head>

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

</html>

二、2D属性

transform：实现元素的位移，旋转，缩放等效果

2. translate（移动）

可以改变元素在页面中的位置

transform：translate（x，y）；

transform：translateX（n）；

transform：translateY（n）；

注意：

定义2D转换中的移动,沿着X和Y轴移动元素
translate最大的优点 :不会影响到其他元素的位置
translate中的百分比单位是相对于自身的 translate:(50%,50%)
对行内标签没有效果

因此，translate可以用来定位中心点

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

移动案例

<!DOCTYPE html>
<html lang="en">

<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>
        .box {
            position: relative;
            margin-left: 800px;
            width: 500px;
            height: 500px;
            background-color: pink;
        }

        .son {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: plum;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="son"></div>
    </div>
</body>

</html>