前端必知：27.2D形变以及过渡动画

最新推荐文章于 2024-01-24 16:53:53 发布

小姚学前端

最新推荐文章于 2024-01-24 16:53:53 发布

阅读量122

点赞数 3

分类专栏： HTHL+CSS 文章标签：前端

本文链接：https://blog.csdn.net/qq_52799985/article/details/131904393

版权

HTHL+CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

概要

2D形变和过渡动画是前端开发中非常有用的工具，可以通过它们为网页添加交互和动态效果，提升用户体验和视觉吸引力。使用CSS属性和过渡来创建这些效果通常比使用JavaScript动画库更简单和高效。

一，2D形变

2D形变包含的内容是

1.平移

2.旋转

3.缩放

4.拉伸（倾斜）

注意：

1.行元素不能形变，img和input除外

2.仅仅是元素形状的变化，文档流的空间并没有变化

设置形变，使用transform 属性

平移使用 translate 1.水平方向平移 translateX（num）num是具体的值，正数向右平移，负数向左平移。

2.垂直方向平移 translateY（num）num是具体的值，正数向下平移，负数向上平移

3.复合写法 translate（x，y）

选择使用rotate(度数) 度数的单位是deg 旋转，度数为正，顺时针旋转。度数为负，逆时针旋转。*形变的层级，后来者居上

使用transform-origin 属性，设置形变的参考点。默认值是center center

transform-origin：x轴方向的位置 y轴方向的位置。值：1.具体的数值2.left top right bottom center等方向名词的组合如果只写一个词，另一个默认是 center。使用缩放 scale （x轴方向的倍数，y轴方向的倍数）如果x轴和y轴缩放倍数相同，则可以只写一个，scale（n）

如果需要把形变组合在一起

transform: scale(2) rotate(180deg) translate（30px，50px）;

transform:缩放旋转平移;

设置倾斜 skew()

写法和translate一样，分为x轴倾斜，y轴倾斜和复合写法

skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n

X轴的度数为正，向左倾斜

X轴的度数为负，向右倾斜

Y轴同理

注意，度数不能是90度，使用复合写法他们的和不能为90

如果同时设置平移和缩放，有两种写法

1.先写平移，然后再缩放，他的结果是先平移到具体位置，然后在该位置上执行缩放

2.先写缩放，然后平移，他的结果是先把所有的值进行缩放，然后按照缩放后的值平移

一般都用第一种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2D形变</title>
    <style>
        *{
            margin: 0;
            padding: 0;

        }
        .wp{
            width: 100px;
            height: 100px;
            background: #04be02;
            /* 设置形变 */
            transform: translate(10px,100px);
            padding: 50px;
        }
        .cai{
            width: 200px;
            height: 200px;
            transition: all 6s;
            /* 设置形变的参考点 */
            transform-origin: 300px 300px;
        }
        .cai:hover{
            transform: rotate(360deg);
        }
        .sc ,.skew{
            width: 100px;
            height: 100px;
            background-color: #e65a0e;
            color: #ff0;
            font-size: 100px;
            text-align: center;
            line-height: 100px;
            margin: 50px auto;
            transition: all 2s;
        }
        .sc:hover{
            transform: scale(0.2) rotate(180deg);
        }
        .skew{
            transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
    <!-- 
        2D形变包含的内容是
        1.平移
        2.旋转
        3.缩放
        4.拉伸（倾斜）
        注意：
        1.行元素不能形变，img和input除外
        2.仅仅是元素形状的变化，文档流的空间并没有变化


        设置形变，使用transform 属性
            平移使用 translate        
                1.水平方向平移 translateX（num）num是具体的值，正数向右平移
                负数向左平移
                2.垂直方向平移 translateY（num）num是具体的值，正数向下平移
                负数向上平移
                3.复合写法 translate（x，y）
            选择使用rotate(度数) 度数的单位是deg  旋转
                度数为正，顺时针旋转
                度数为负，逆时针旋转
                *形变的层级，后来者居上
                使用transform-origin 属性，设置形变的参考点。
                默认值是center center
                transform-origin：x轴方向的位置 y轴方向的位置
                值 
                   1.具体的数值
                   2.left top right bottom center等方向名词的组合
                   如果只写一个词，另一个默认是 center

            使用缩放 scale （x轴方向的倍数，y轴方向的倍数）
               如果x轴和y轴缩放倍数相同，则可以只写一个
               scale（n）

               如果需要把形变组合在一起
                transform: scale(2) rotate(180deg) translate（30px，50px）;
                transform:缩放 旋转 平移;

            设置倾斜 skew()
                写法和translate一样，分为x轴倾斜，y轴倾斜和复合写法
                skewX(n+deg) 元素倾斜，就是元素和y轴的夹角为n
                X轴的度数为正，向左倾斜
                X轴的度数为负，向右倾斜
                Y轴同理 
                注意，度数不能是90度，使用复合写法他们的和不能为90
     -->
     <div class="wp">蔡徐坤</div>
     <span class="wp">唱跳，rap</span>
     <img src="./img/小黑子露出鸡脚了吧.jpg" class="cai" alt="">
     <div class="sc">饭</div>

     <div class="skew">吃</div>
</body>
</html>

二，过渡动画

过渡动画，设置元素从一种状态达到另一种状态的动画效果设置属性是 transition

transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以

用英文逗号隔开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果

不设置该属性，默认为all

transition-duration 设置过渡动画的持续时间，单位是s秒

transition-delay 设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候

也有延迟

transition-timing-function 设置动画的变化曲线

ease 默认值，先快后慢

liner 匀速运动

ease-in 淡入效果，先快后慢

ease-out 淡出效果，先匀速，再快，再慢

ease-in-out 淡入淡出，两边慢，中间快

以上均属于贝塞尔曲线中的特殊曲线

过渡动画也可以合写：

transition：property duration timing-function delay；

后面两个可以省略，直接设置默认值

过渡动画的出发时机

过渡动画不会主动触发

触发方式

1.通过伪类出发 hover focuse target

2.媒体查询

3.通过js触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .move{
            width: 100px;
            height: 100px;
            background: #04be02;
            text-align: center;
            line-height: 100px;
            color: bisque;
            font-size: 60px;
            transition: all 2s;
        }
        .move:hover{
            transform:scale(2) translate(100px,0) ;
        }
        .trans{
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin-top: 50px;
            /* 设置过渡动画控制的css属性 */
            /* transition-property:width ,height,margin-top,background; */
            /* 设置过渡动画的持续时间 */
            transition-duration: 2s;
            /* 设置过渡动画的延迟时间 */
            /* transition-delay:3s; */
            /* 设置动画的变化曲线 */
            transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition-timing-function:linear;
        }
        .trans:hover{
            width: 400px;
            height: 200px;
            margin-top: 10px;
            background: bisque;
        }
    </style>
</head>
<body>
    <!-- 
        如果同时设置平移和缩放，有两种写法
        1.先写平移，然后再缩放，他的结果是 先平移到具体位置，然后在该位置上执行缩放
        2.先写缩放，然后平移，他的结果是 先把所有的值进行缩放，然后按照缩放后的值平移
        一般都用第一种写法

        过渡动画，设置元素从一种状态达到另一种状态的动画效果
        设置属性是 transition

        transition-property 设置需要过渡的css属性，如果有多个属性需要过渡，则可以
        用英文逗号隔开，也可以直接设置all，all表示所有变化的css属性都需要过渡，如果
        不设置该属性，默认为all
        transition-duration 设置过渡动画的持续时间，单位是s秒
        transition-delay  设置过渡动画的延迟时间，动画开始的时候有延迟，结束的时候
        也有延迟
        transition-timing-function 设置动画的变化曲线
            ease 默认值，先快后慢
            liner 匀速运动
            ease-in 淡入效果，先快后慢
            ease-out 淡出效果，先匀速，再快，再慢
            ease-in-out 淡入淡出，两边慢，中间快
            以上均属于贝塞尔曲线中的特殊曲线

        过渡动画也可以合写：
        transition：property duration timing-function delay；
        后面两个可以省略，直接设置默认值

        过渡动画的出发时机
        过渡动画不会主动触发
        触发方式
        1.通过伪类出发  hover focuse target
        2.媒体查询
        3.通过js触发
     -->
    <div class="move">国</div>

    <div class="trans"></div>
</body>
</html>

小结

2D形变：

2D形变指在平面内对元素进行变换，包括平移、旋转、缩放和倾斜等操作。
平移（translate）操作可以使元素在平面内沿指定的坐标轴进行移动。
旋转（rotate）操作可以使元素绕一个中心点旋转一定角度。
缩放（scale）操作可以改变元素的宽度和高度，使其变大或变小。
倾斜（skew）操作可以使元素在水平或垂直方向上产生斜切效果。
这些2D形变可以通过CSS属性（如transform、translate、rotate、scale和skew）和CSS3的Matrix变换函数来实现。

过渡动画：

过渡动画是指在元素从一种状态变换到另一种状态时，通过在一段时间内逐渐改变元素的属性值来创建平滑的动画效果。
过渡动画可以应用于元素的各种属性，如颜色、大小和位置等。
过渡动画需要定义两个状态之间的变化，并指定过渡的持续时间、延迟时间和缓动函数等参数。
过渡动画使用CSS属性transition来定义，并通过CSS选择器将过渡效果应用到相应的元素上。
过渡动画也可以通过JavaScript来触发和控制，使用元素的style属性或添加/删除CSS类来改变属性值。

通过使用2D形变和过渡动画，开发者可以为网页添加各种交互和动态效果，为用户提供更好的体验和视觉吸引力。这些技术通常通过CSS来实现，提供了一种简单和高效的方式来创建动画效果，而不需要使用复杂的JavaScript动画库。

小姚学前端

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端必知：27.2D形变以及过渡动画

通过使用2D形变和过渡动画，开发者可以为网页添加各种交互和动态效果，为用户提供更好的体验和视觉吸引力。这些技术通常通过CSS来实现，提供了一种简单和高效的方式来创建动画效果，而不需要使用复杂的JavaScript动画库。
复制链接

扫一扫