diff --git "a/\347\250\213\346\242\246/20241028_3D\350\275\254\346\215\242&\345\212\250\347\224\273.md" "b/\347\250\213\346\242\246/20241028_3D\350\275\254\346\215\242&\345\212\250\347\224\273.md" new file mode 100644 index 0000000000000000000000000000000000000000..bfc2cdb9f6982644264f36f6d284c5946247a0b3 --- /dev/null +++ "b/\347\250\213\346\242\246/20241028_3D\350\275\254\346\215\242&\345\212\250\347\224\273.md" @@ -0,0 +1,227 @@ +# 3D转换 +1. 旋转：`rotateX`、`rotateY`、`rotateZ` +**3D坐标系：（左手坐标系）** +**旋转的方向：（左手法则）** +> 格式： +```js + transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 +``` +2. 移动：`translateX`、`translateY`、`translateZ` +> 格式： +```js + transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 +``` +3. 透视：`perspective: 110px` +> 加给变换的父盒子；设置的是用户的眼睛的距离、平面的距离；透视效果只是视觉上的呈现，并不是真正的3D +> 加透视属性能达到3D效果 +> 透视的是要加给图片的父元素 div，方能生效 +4. 3D呈现`transform-style: preserve-3d` +> 给父元素设置 +```css + transform-style: preserve-3d; /* 让 子盒子 位于三维空间里 */ + + transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */ +``` +# 动画 +1. 定义动画的步骤 +（1）通过@keyframes定义动画 +（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性 +（3）在指定元素里，通过 `animation` 属性调用动画 +**定义动画**的时候，也是**先定义，再调用**： +```js + 定义动画： + @keyframes 动画名{ + from{ 初始状态 } + to{ 结束状态 } + } + + 调用： + animation: 动画名称 持续时间； +``` +2. 动画属性 +**animation属性的格式**： +```js + animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) + animation: move1 1s alternate linear 3; + animation: move2 4s; +``` +**属性拆分讲解** +* 动画名称：`animation-name: (定义的动画名称)` +* 执行一次动画的持续时间：`animation-duration: 4s (持续时间)` +* 动画的执行次数：`animation-iteration-count: 1 (执行次数)` + * interation-->表示迭代 + * 属性值`infinite`-->表示无数次 +* 动画的方向：`animation-direction: alternate;` + * normal-->正常 + * alternate-->反向 +* 动画延迟执行：`animation-delay: 1s (延迟执行)` +* 设置动画结束时，盒子的状态：`animation-fill-mode:forwards` + * forwards-->保持动画结束后的状态(默认) + * backwards-->动画结束后回到最初的状态 +* 运动曲线：`animation-timing-function:ease-in` + * 属性值`linear`、`ease-in-out`、`steps` +## steps()的效果 +> ` steps()`**，则表示动画**不是连续执行**，而是间断地分成几步执行。我们接下来专门讲一下属性值 `steps()` +# lesson20-任务 +> 二十八、动画 +## [动画显示效果] +![28-1](./images-练习显示/28-1.gif)![28-2]()![28-3]() +1. 歌词动画 +```html + +
+
+
+

《泪桥》

+

演唱：伍佰

+

无心过问你的心里我的吻 厌倦 我的亏欠 代替你所爱的人

+
+
+
+
+

《泪桥》

+

演唱：伍佰

+

无心过问你的心里我的吻 厌倦 我的亏欠 代替你所爱的人

+
+
+
+
+

《泪桥》

+

演唱：伍佰

+

无心过问你的心里我的吻 厌倦 我的亏欠 代替你所爱的人

+
+
+
+
+

《泪桥》

+

演唱：伍佰

+

无心过问你的心里我的吻 厌倦 我的亏欠 代替你所爱的人

+
+
+
+ +``` +```css + +``` + + diff --git "a/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/28-1.gif" "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/28-1.gif" new file mode 100644 index 0000000000000000000000000000000000000000..5aa77252b12f6b3f554628b973872233828913a9 Binary files /dev/null and "b/\347\250\213\346\242\246/images-\347\273\203\344\271\240\346\230\276\347\244\272/28-1.gif" differ