From 77e0484a564c3fda2900656d415a996b919f168e Mon Sep 17 00:00:00 2001 From: l y Date: Sun, 27 Oct 2024 21:52:16 +0800 Subject: [PATCH] =?UTF-8?q?20241024=E7=AC=94=E8=AE=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...50\347\224\273\347\254\224\350\256\260.md" | 372 ++++++++++++++++++ 1 file changed, 372 insertions(+) create mode 100644 "\344\275\231\344\270\275/20241024-\345\212\250\347\224\273\347\254\224\350\256\260.md" diff --git "a/\344\275\231\344\270\275/20241024-\345\212\250\347\224\273\347\254\224\350\256\260.md" "b/\344\275\231\344\270\275/20241024-\345\212\250\347\224\273\347\254\224\350\256\260.md" new file mode 100644 index 0000000..50a7f94 --- /dev/null +++ "b/\344\275\231\344\270\275/20241024-\345\212\250\347\224\273\347\254\224\350\256\260.md" @@ -0,0 +1,372 @@ +# 动画详解 +## 过渡 +1.transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。 + +2.transition 包括以下属性： + +* transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 + +* transition-duration: 1s; 过渡的持续时间。 + +* transition-timing-function: linear;运动曲线。 + +3.属性值可以是： + +* linear 线性 +* ease 减速 +* ease-in 加速 +* ease-out 减速 +* ease-in-out 先加速后减速 +* transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。 + + +4.transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; + + transition: all 3s linear 0s; + +5.transition-property: width，意思是只让盒子的宽度在变化时进行过渡 + +6.transition-property: all，意思是让盒子的所有属性（包括宽度、背景色等）在变化时都进行过渡 + +7.overflow: hidden; /* 让溢出的内容隐藏起来。意思是让下方的橙色方形先躲起来 */ + + transition: all .5s; /* 从最初到鼠标悬停时的过渡 */ + +8. /* 鼠标悬停时，让 item 整体往上移动5px，且加一点阴影 */ + .item:hover { + top: -5px; + box-shadow: 0 0 15px #AAA; + } + + /* 鼠标悬停时，让下方的橙色方形现身 */ + .item:hover .desc { + bottom: 0;} + +## 缩放:scale +1.格式 +``` +transform: scale(x, y); + + transform: scale(2, 0.5); +``` + +2.x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。 + +取值：大于1表示放大，小于1表示缩小。不能为百分比。 + +## 位移：translate +1.格式 +``` +transform: translate(水平位移, 垂直位移); + + transform: translate(-50%, -50%); +``` +2.参数为百分比，相对于自身移动。 + +正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。 + +## 旋转：rotate +1.格式 +``` +transform: rotate(角度); + + transform: rotate(45deg); + 正值 顺时针；负值：逆时针。 +``` + +## 3D转换 +1.旋转：rotateX、rotateY、rotateZ +2.格式 +``` +transform: rotateX(360deg); //绕 X 轴旋转360度 + + transform: rotateY(360deg); //绕 Y 轴旋转360度 + + transform: rotateZ(360deg); //绕 Z 轴旋转360度 + +``` + +3.移动：translateX、translateY、translateZ +4.格式 +``` +transform: translateX(100px); //沿着 X 轴移动 + + transform: translateY(360px); //沿着 Y 轴移动 + + transform: translateZ(360px); //沿着 Z 轴移动 + +``` + +5.透视：perspective +格式 +``` +perspective: 500px +``` + +# 作业 +## 过渡、2D转换、3D转换第一题 +```html + + + +
+
+ +
+ +
+ + +
+ +
+ + +
+
+``` + +## 第二题 +````html + + + +
王鹤棣好帅！！！
+```` + +## 第三题 +````html + + + + + +```` + +## 第四题 +``````html + + + +
+ + + + + + + + + + + + + + +
+ +``````` + +## 第五题 +`````html + + + +
+
+
+
+````` + + + + + -- Gitee