CSS实施变形、过渡和动画的效果的基本方法是什么

发布时间：2023-10-05 14:24:01 所属栏目：语言来源：

导读：这篇文章主要讲解了“CSS实现变形、过渡和动画的效果的基本方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS实现变形、过渡和动画的

这篇文章主要讲解了“CSS实现变形、过渡和动画的效果的基本方法是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“CSS实现变形、过渡和动画的效果的基本方法是什么”吧！

1、过渡 transition

过渡属性用法： transition :ransition-property transition-duration transition-timing-function   transition-delay

可以一起指定也可以分别单独指定

transition-property: 是要过渡的属性（如width，height），all是所有都改变。

transition-duration：花费的时间，单位为s或ms

transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种

ease=>逐渐慢下来（默认值） linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速

transition-delay 延迟时间，单位为s或ms

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 200px;

            background-color: aqua;

            transition: width 2s ease-in-out 0.5s;

        }

        div:hover {

            width: 500px;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。

2、变形 transform

(1)、2D变形

（a）移动 translate(x,y)

移动可以指定像素值也可以指定百分比，注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: aqua;

            transition: all 2s;

        }

        div:active {

            transform: translate(200px, 200px);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

点击之后盒子进行了移动。用于让定位的盒子居中的代码入下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .fa {

            width: 300px;

            height: 300px;

            background-color: aqua;

            transition: all 0.5s;

            position: relative;

        }

        .son {

            background-color: red;

            position: absolute;

            left: 50%;

            top: 50%;

            width: 100px;

            height: 100px;

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

        }

    </style>

</head>

<body>

    <div class="fa">

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

    </div>

</body>

</html>

（b）缩放 scale（x，y）

x,y设置大于1 是放大，小于1 是缩小。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: aqua;

            margin: 200px auto;

            transition: all 2s;

        }

        div:hover {

            transform: scale(0.5, 2);

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

（c）旋转 rotate(x deg)

x指定度数值，正数是顺时针旋转，负数是逆时针旋转。

旋转可以使用 transform-origin 指定旋转中心点，transform-origin 给left top right bottom 也可以指定具体的像素值。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 100px;

            background-color: aqua;

            margin: 200px auto;

            transition: all 2s;

            transform-origin: bottom left;

        }

        div:hover {

            transform: rotate(120deg);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

（d）倾斜 skew（x deg ,y deg）

x,y分别指定倾斜在x，y方向上的角度，可以为负数。y值不写默认为0。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: aqua;

            border: 1px solid red;

            transition: all 1s;

            margin: 200px auto;

        }

        div:hover {

            transform: skew(30deg, 20deg);

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

（2）3D变形

（a）旋转（rotateX,rotateY,rotateZ）

3D旋转与2D类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 200px;

            height: 100px;

            background-color: aqua;

            margin: 200px auto;

            transition: all 2s;

            transform-origin: bottom left;

        }

        div:hover {

            transform: rotateX(120deg);

            /* transform: rotateY(120deg); */

            /* transform: rotateZ(120deg); */

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

（b）移动（translateX，translateY，translateZ）

3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。

要使Z放线上移动生效首先要设置perspective（眼睛距离屏幕的距离）;

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        body {

            perspective: 1000px;

            /* 数值越小说明眼睛离的越近 */

        }

        div {

            width: 200px;

            height: 200px;

            background-color: aqua;

            transition: all 0.5s;

            margin: 200px auto;

        }

        div:hover {

            transform: translate3d(0, 0, 200px);

        }

    </style>

</head>

<body>

    <div>

    </div>

</body>

</html>

3、动画 animation

（1）、 animation: animation- name || animation- duration|| animation- timing-function || animation- delay || animation- iteration-count|| animation- direction|| animation- fill-mode;

animation-name:动画名称（自己使用@keyframes 定义的动画）

animation-duration：持续时间

animation-timing-function：运动曲线，与过渡的运动曲线类似。

animation-delay：延迟时间

animation-iteration-count：循环次数（infinite 是无限循环）

animation-direction：是否反向（动画是否是由结尾倒开是倒着放的）

animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态）

animation-play-state：设置动画状态 running 开始|paused 暂停

（2）、@keyframes 自定义动画

格式如下

@keyframes 动画名称 {

from{ 开始} 0%

to{ 结束 } 100%

}

可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        div {

            width: 100px;

            height: 100px;

            background-color: aqua;

            /* animation: 动画名称动画时间运动曲线何时开始播放次数是否反方向 */

            animation: move 5s linear 3;

        }

        @keyframes move {

            0% {

                transform: translate3d(0, 0, 0);

            }

            25% {

                transform: translate3d(400px, 0, 0);

            }

            50% {

                transform: translate3d(400px, 300px, 0);

            }

            75% {

                transform: translate3d(0, 300px, 0);

            }

            100% {

                transform: translate3d(0, 0, 0);

            }

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!