HTML+CSS之过度,变形,动画(14个案例+代码+效果图)

目录

过渡 (Transitions)

transition-property：

案例:鼠标悬浮方逐渐放大

1.代码

2.效果

transition-duration：

案例:鼠标悬停逐渐慢慢放大

1.代码

2.效果

transition-timing-function：

案例:放大速度为ease-out

1.代码

2.效果

transition-delay：

案例:延迟一秒放大

1.代码

2.效果

变换 (Transforms)

平移 (translate)：

案例:移动到指定位置

1.代码

2.效果

缩放 (scale)：

案例:使用scale放大图片

1.代码

2.效果

倾斜 (skew)：

案例:图片倾斜45

1.代码

2.效果

旋转 (rotate)：

案例:图片旋转45

1.代码

2.效果

围绕X轴旋转 (rotateX())：

案例:图片围绕x轴旋转45

1.代码

2.效果

围绕Y轴旋转 (rotateY())：

案例:图片围绕Y轴旋转45

1.代码

2.效果

围绕Z轴旋转 (rotateZ())：

案例:图片围绕Z轴旋转45

1.代码

2.效果

围绕X轴平移 (translateX(x))：

案例:图片围绕X轴平移

1.代码

2.效果

围绕Y轴平移 (translateY(y))：

案例:图片围绕Y轴平移

1.代码

2.效果

关键帧动画 (@keyframes 和 Animations)

@keyframes 规则：

animation-name：

animation-duration：

animation-timing-function：

animation-delay：

animation-iteration-count：

animation-direction：

案例:制作一个闪烁放大的效果动画

1.代码

2.效果

过渡 (Transitions)

过渡是CSS中用来平滑地从一种样式变到另一种样式的动画效果。它们通常在用户交互（如鼠标悬停）时触发。

transition-property：
- 指定哪些CSS属性应该具有过渡效果。
- 值可以是具体的属性名（例如width、color）、多个属性用逗号分隔，或者使用all来表示所有属性。
- 示例：transition-property: width, heigh

`案例:鼠标悬浮方逐渐放大`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬浮方逐渐放大</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

`2.效果`

原始效果

鼠标悬停状态

transition-duration：
- 定义过渡完成所需的时间。
- 可以设置为秒(s)或毫秒(ms)。
- 示例：transition-duration: 0.5s;

`案例:鼠标悬停逐渐慢慢放大`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标悬浮方逐渐放大</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            transition-duration: 8s;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

`2.效果`

原始状态

逐渐放大状态

transition-timing-function：
- 控制过渡的速度曲线。
- 常见值包括ease（默认），linear，ease-in，ease-out，ease-in-out，以及自定义的贝塞尔曲线cubic-bezier(n,n,n,n)。
- 示例：transition-timing-function: ease-in-out;

案例:放大速度为ease-out

1.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大速度为ease-out</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            /**
              * 持续时间
              */
            transition-duration: 8s;
            /**
            *线性动画
            */
            transition-timing-function: ease-out;
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

2.效果

原始状态

放大状态

transition-delay：
- 设置过渡开始前的延迟时间。
- 可以是正数（延迟开始）或负数（提前开始）。
- 示例：transition-delay: 0.2s;

`案例:延迟一秒放大`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大速度为ease-out</title>

    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
        }
        .myDivStyle:hover{
            
            width: 400px;
            height: 400px;
            /**
             * 渐变 放大
             */
            transition-property: width,height;
            /**
              * 持续时间
              */
            transition-duration: 8s;
            /**
            *线性动画
            */
            transition-timing-function: ease-out;
            /**
            * 延迟1s
            */
            transition-delay: 1s;
           
        }
    </style>
</head>
<body>
    <div class="myDivStyle" ></div>
    
</body>
</html>

`2.效果`

原始状态

鼠标悬浮延迟1s后会慢慢放大

变换 (Transforms)

变换允许你改变元素的形状、大小和位置。

平移 (translate)：
- transform: translate(x, y); 在X轴和Y轴上移动元素。
- 示例：transform: translate(50px, 100px);

`案例:移动到指定位置`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平移到指定位置</title>
    <style>
        .myDivStyle{
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }
        .myDivStyle:hover{
            
            transform: translate(300px,300px);
            transition-property: transform;
            transition-duration: 8s;
            
        }
    </style>

</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

原始状态

平移状态

最终平移

缩放 (scale)：
- transform: scale(x, [y]); 放大或缩小元素。
- 如果只提供一个参数，则X轴和Y轴将被相同地放大/缩小。
- 示例：transform: scale(1.5, 0.8);

`案例:使用scale放大图片`

`1.代码`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用scale放大图片</title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: scale(5);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

原始状态

5倍放大

倾斜 (skew)：
- transform: skew(x-angle, [y-angle]); 让元素沿X轴和/或Y轴倾斜。
- 示例：transform: skew(20deg, 10deg);

`案例:图片倾斜45`

`1.代码`

`2.效果`

原始状态

倾斜

旋转 (rotate)：
- transform: rotate(a); 绕Z轴旋转元素a度。
- 示例：transform: rotate(45deg);

`案例:图片旋转45`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片旋转45</title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotate(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

原始状态

旋转状态

围绕X轴旋转 (rotateX())：
- transform: rotateX(angle); 绕X轴旋转。
- 示例：transform: rotateX(30deg);

`案例:图片围绕x轴旋转45`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕x轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateX(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

鼠标悬浮后的状态

围绕Y轴旋转 (rotateY())：
- transform: rotateY(angle); 绕Y轴旋转。
- 示例：transform: rotateY(30deg);

`案例:图片围绕Y轴旋转45`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕y轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateY(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

围绕y轴后的结果

围绕Z轴旋转 (rotateZ())：
- transform: rotateZ(angle); 绕Z轴旋转，与rotate()相同。
- 示例：transform: rotateZ(30deg);

`案例:图片围绕Z轴旋转45`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕z轴旋转45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: rotateZ(45deg);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

围绕z轴旋转45的结果

围绕X轴平移 (translateX(x))：
- transform: translateX(x); 仅沿X轴平移。
- 示例：transform: translateX(50px);

`案例:图片围绕X轴平移`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕X轴平移45
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: translateX(200px);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

平移之后的效果

围绕Y轴平移 (translateY(y))：
- transform: translateY(y); 仅沿Y轴平移。
- 示例：transform: translateY(100px);

`案例:图片围绕Y轴平移`

`1.代码`


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片围绕X轴平移200px
    </title>
    <style>
        .myDivStyle {
            background: url("aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
        }

        .myDivStyle:hover {
            transform: translateY(200px);
            transition-property: transform;
            transition-duration: 8s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="myDivStyle"></div>
</body>
</html>

`2.效果`

关键帧动画 (@keyframes 和 Animations)

关键帧动画允许你创建复杂的动画序列。

@keyframes 规则：
- 定义动画的关键帧，即动画过程中特定点的样式规则。
animation-name：
- 引用由@keyframes定义的动画名称。
- 示例：animation-name: fadeIn;
animation-duration：
- 设置动画完成一个周期所需的时间长度。
- 示例：animation-duration: 2s;
animation-timing-function：
- 类似于过渡中的transition-timing-function，定义了动画的速度曲线。
- 示例：animation-timing-function: ease;
animation-delay：
- 设置动画开始前的等待时间。
- 示例：animation-delay: 1s;
animation-iteration-count：
- 确定动画应该播放多少次。
- 可以是一个具体的次数（如2），或者无限循环（infinite）。
- 示例：animation-iteration-count: infinite;
animation-direction：
- 控制动画是否反向运行。
- 可能的值包括normal（默认，每次迭代从头到尾正常播放）、reverse（反向播放）、alternate（第一次正向，第二次反向，如此交替）及alternate-reverse（首次反向，随后交替）。
- 示例：animation-direction: alternate;

案例:制作一个闪烁放大的效果动画

1.代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作一个闪烁放大的效果动画</title>
    <style>
        .myDivStyle {
            background: url("./aImg.png");
            width: 200px;
            height: 200px;
            background-size: cover;
            border: 2px solid rgb(18, 197, 197);
            display: flex;
            justify-content: center;
            align-items: center;

            /**
            *动画名字
            */
            animation: myDivAnimation;
            /**
            * 动画持续时间
            */
            animation-duration: 2s;
            /**
            * 动画播放次数（无限播放）
            */
            animation-iteration-count: infinite;
            /**
            * 动画播放方式 ease-in-out
            */
            animation-timing-function: ease-in-out;
            /**
            * 动画延迟时间
            */
            animation-delay: 0.1s;
        }

        /**
        * 动画
        */
        @keyframes myDivAnimation{
            0%{
                transform: scale(1);
                opacity: 1;

            }
            50%{
                transform: scale(2);
                opacity: 0.2;
            }
            100%{
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
</head>

<body style="display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;">


    <div class="myDivStyle"></div>

</body>

</html>