实例：跳动的心，火柴人

跳动的心

思路：一个正方形两个半圆在旋转 transform: rotate(45deg);

然后添加动画，就像前面写的呼吸效果，就能跳起来了

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            width: 100%;
            height:100%;
        }
        body{
                background-color: rgb(249, 249, 249);      /* 背景颜色为浅粉色（RGB值为228, 191, 197） */
                display: flex;                             /* 将该元素设为弹性（Flex）容器，启用 Flexbox 布局 */
                flex-direction: column;                    /* 弹性项目（子元素）按一列（纵向）排列 */
                align-items: center;                       /* 在交叉轴（垂直方向）上居中对齐子元素 */
                justify-content: center;                   /* 在主轴（水平方向）上居中对齐子元素 */
        }
        .heart{
            height: 200px;      
            width: 200px;
            background-color: pink;
            position:relative;
            transform: rotate(45deg);
            animation: heartbeet 1s alternate infinite; 
            box-shadow: 0 0 30px pink;
        }
        .heart::before{
            content:"";
            height: 100px;
            width:200px;
            background-color: pink;
            position:absolute;
            left:0;
            top:-99px;
            border-radius: 100px 100px 0px 0px;
            box-shadow: 0 0 30px pink;
        }
        .heart::after{
            content: "";
            height:200px;
            width:100px;
            background-color: pink;
            position:absolute;
            left:-99px;
            top:0px;
            border-radius: 100px 0px 0px 100px;
            box-shadow: 0 0 30px pink;
        }
        @keyframes heartbeet {
            0%{
                transform: rotate(45deg) scale(0.6);
            }
            100%{
                transform: rotate(45deg) scale(1.4);
            }
        }
        p{
            margin-top: 200px;                               /* 与心形上方的间距 */
            font-size: 28px;                                /* 字体大小 */
            color: #ff69b4;                                 /* 粉红色，与心形颜色搭配 */
            font-weight: bold;                              /* 字体加粗 */
            letter-spacing: 2px;                            /* 字母间距 */
            
        }
        
    </style>
</head>
<body>
    <div class="heart"></div>
 
    <p>我的心只为你跳动</p>
  
</body>
</html>

我不太明白为什么要重复加旋转45度。

火柴人

cao,这个摆动的角度好难弄，我要疯了，用不来rotate3d()这玩意，我的三维想象很差。

笑死我了我的火柴人跑起来卡卡的哈哈哈哈，但是也算是自己一点点搞出来的，也挺满意的

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: black;
        }
        .container{
            height:300px;
            width: 300px;
            margin:50px;
        }
        .person{
            position: absolute;
            left:150px;
            top:160px;
            animation: run 3s linear  infinite;
        }
        .head{
            position: absolute;
            width: 30px;
            height: 30px;
            border: 7px solid white;
            border-radius: 100%;
            top:-30px;
            left:-60px;
            animation: toudong 2s infinite alternate;
        }
        .body{
            position: absolute;
            width: 0px;
            height: 60px;
            border: 5px solid white;
            top:10px;
            left:-50px;
            
        }
        .zuobi{
            position:absolute;
            width:30px;
            height: 35px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(58deg);
            transform-origin: 0 0;                          /* 设置旋转中心点为手臂起点（肩膀位置） */
            left:-50px;
            top:17px;
            animation: zuogebodong 0.5s ease-in-out infinite; /* 前后摆动动画 */
        }
        .youbi{
            position:absolute;
            width:30px;
            height: 35px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(290deg);
            transform-origin: 0 0;                          /* 设置旋转中心点为手臂起点（肩膀位置） */
            left:-45px;
            top:17px;
            animation: yougebodong 0.5s ease-in-out infinite; /* 前后摆动动画，与左臂相反 */

        }
        .zuojiao{
            position:absolute;
            width:38px;
            height: 30px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(-70deg);
            left:-87px;
            top:38px;
            transform-origin:100% 100%;                          /* 设置旋转中心点为腿部起点（臀部位置） */
            animation: zuojiaodong 0.5s ease-in-out infinite;  /* 前后摆动动画 */
        }
        .youjiao{
            position:absolute;
            width:30px;
            height: 38px;
            border-left: 5px solid white;
            border-bottom: 5px solid white;
            transform: rotate(-180deg);
            left: -79px;
            top:32px;
            transform-origin: 100% 100%;                          /* 设置旋转中心点为腿部起点（臀部位置） */
            animation: youjiaodong 0.5s ease-in-out infinite; /* 前后摆动动画，与右腿交替 */
                                 /* 延迟0.5秒，使左腿与右腿交替摆动 */
        }
        /*头动*/
        @keyframes toudong {
            0%{
                transform: rotate3d(0,0,1,5deg);
            }
            25%{
                transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
            }
            50%{
                transform: rotate3d(0,0,1,5deg) ;
            }
            75%{
                transform: rotate3d(0,0,1,-30deg) skew(15deg,0deg);
            }
            100%{
                transform: rotate3d(0,0,1,20deg) skew(-15deg,0deg);
            }
        }
        /*左胳膊前后摆动*/
        @keyframes zuogebodong{
            0%{
                transform: rotate(30deg);                    /* 向后摆 */
            }
            50%{
                transform: rotate(0deg);                    /* 向前摆 */
            }
            100%{
                transform: rotate(30deg);                    /* 回到向后摆 */
            }
        }
        /*右胳膊前后摆动（与左臂相反）*/
        @keyframes yougebodong{
            0%{
                transform: rotate(310deg);                   /* 向后摆（与左臂相反） */
            }
            50%{
                transform: rotate(360deg);                   /* 向前摆（与左臂相反） */
            }
            100%{
                transform: rotate(310deg);                   /* 回到向后摆 */
            }
        }
        @keyframes zuojiaodong {
            0%{
                transform: rotate(-70deg);
            }
            50%{
                transform: rotate(-120deg);
            }
            100%{
                transform: rotate(-70deg);
            }
        }
        @keyframes youjiaodong {
            0%{
                transform: rotate(-180deg);
            }
            50%{
                transform: rotate(-100deg);
            }
            100%{
                transform: rotate(-180deg);
            }
            
        }
        @keyframes run {
            0%{
                transform: translateX(0px);
            }
            100%{
                transform: translateX(1200px);
            }
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="person">
            <div class="head"></div>
            <div class="zuobi"></div>
            <div class="youbi"></div>
            <div class="body"></div>
            <div class="zuojiao"></div>
            <div class="youjiao"></div>
        </div>
    </div>
</body>
</html>

本来是和教程里的代码一样但是中途transform-origin: 0 0;这个玩意没听明白，打算不用他的自己写到一半发现必须用他。角度这个东西真的调起来好复杂。但是慢慢自己动手写一遍就知道这些数值代表的啥，怎么调整。真希望以后有插件可以滚动预览角度，一个个试参数真的很头疼。

补充相关知识：

`transform-origin`

用于定义一个元素的变形基准点 ，比如你用 rotate()、scale()、skew()等变形函数时，元素是围绕哪个点进行变形的。

|--------------|-------------------------------------------------|---------|
| **默认（中心点）** | transform-origin: 50% 50%;或 center; | 元素正中间 |
| 左上角 | transform-origin: 0 0;或 left top; | 左边和上边交界 |
| 右上角 | transform-origin: 100% 0;或 right top; | 右上角 |
| 左下角 | transform-origin: 0 100%;或 left bottom; | 左下角 ✅推荐 |
| 右下角 | transform-origin: 100% 100%;或 right bottom; | 右下角 |
| 顶部中心 | transform-origin: 50% 0; | 水平居中，顶部 |
| 底部中心 | transform-origin: 50% 100%; | 水平居中，底部 |

CSS Transform 函数总览

|--------------|--------------------------------------------------------------------------------------------------------------------|----|
| rotate() | 旋转元素正数：顺时针旋转 负数：逆时针旋转 （比如 rotate(-30deg)） | 2D |
| scale() | 缩放元素（放大/缩小） scale(1)→ 原始大小（不变） scale(1.5)→ 放大到 1.5 倍 scale(0.5)→ 缩小到一半 scale(-1)→ 水平翻转（镜像） | 2D |
| skew() | 倾斜元素（拉伸变形）第一个参数控制 X 轴倾斜（水平倾斜） 第二个参数控制 Y 轴倾斜（垂直倾斜） | 2D |
| rotate3d() | 在 3D 空间中旋转元素(x, y, z, 角度); | 3D |

此外还有：

translate()：移动元素位置
translateX(), translateY(), translateZ()：分别控制 X/Y/Z 方向移动
rotateX(), rotateY(), rotateZ()：分别绕 X/Y/Z 轴旋转（3D）
scaleX(), scaleY(), scaleZ()：分别控制 X/Y/Z 方向缩放
skewX(), skewY()：分别控制水平或垂直方向的倾斜