当前位置：首页 > news >正文

实例：跳动的心，火柴人

news 2025/11/9 6:44:32

跳动的心

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

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

<!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()这玩意，我的三维想象很差。

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

<!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