华清远见重庆中心-阶段总结/学习心得分享/移动互联应用技术总结

1. transform 变换，始终是参考当前状态进行变换
   translate 平移
   第一个参数: x轴的平移量，正方向向右
   第二个参数: y轴的平移量，正方向向下
   transform: translate(100px, 200px);
   2.填一个参数的话，只有横坐标进行了平移
   transform: translate(100px);
   3.translateX x轴上平移
   transform: translateX(300px);
transform: translateY(300px);
transform: translateZ(300px);
   4. rotate: 旋转元素
   参数代表旋转的角度
   代表角度的单位是 deg
   代表弧度的单位是 rad
   元素的旋转角度是参考的元素的正上方
   顺时针旋转为正方向
   旋转中心默认为元素中心
   transform: rotate(30deg);
transform: rotateX(30deg);
transform: rotateY(30deg);
transform: rotateZ(30deg);
   5. 左右镜像
   transform: rotateY(180deg);
   上下镜像
   transform: rotateX(180deg);
   6. scale 缩放
   参数代表的是缩放比例，值为1 则为原始大小
   transform: scale(1, 0.5);
   7. 参数只写一个，代表的是水平和竖直方向缩放相同的比例
   transform: scale(3);
   8. 负数代表的就是在指定轴上的镜像
   transform: scale(-0.5, 1);
transform: scaleX(2);
transform: scaleY(2);
transform: scaleZ(2);
   9.隐藏元素的方法：将缩放调为0
   transform: scale(0);
   10. /* skew 倾斜 /
   / 第一个参数: 水平轴的倾斜度数 /
   / 第二个参数: 竖直轴的倾斜度数 /
   transform: skew(0, 30deg);
   11./ 只设置一个参数 则只有水平轴倾斜有效 /
   transform: skew(30deg);
transform: skewX(30deg);
transform: skewY(30deg);
   12./ 同时设置多个变换属性，用空格隔开 /
   transform: rotate(180deg) translateX(100px) scale(0.5);
   13. / transform 的实现原理类似于矩阵，先旋转后平移和先平移后旋转结果是不同的 /
   transform: translateX(100px) rotate(180deg) scale(0.5);
   14./ 设置transform的原点 /
   / 原点的位置会影响旋转的圆心，缩放的位置 /
   / 值的带选项：center, top, bottom, left, right, 还可以写具体的长度值 /
   transform-origin: center;
transform-origin: right bottom;
   15. / 原点若x值和y值都为0，代表的是元素左上角的位置 /
   / 第一参数值代表横向移动的距离，正数代表向右移动，负数代表向左移动 /
   / 第二参数值代表纵向移动的距离，正数代表向下移动，负数代表向上移动 /
   transform-origin: 50px 100px;
transform: rotate(0deg);
   16./ 变换原点还会影响缩放的位置 /
   transform-origin: left top;
transform: scaleY(1);
   17./ 谷歌浏览器可以识别该属性 /
   -webkit-transform: translate(100px, 120px);
   18. / 火狐浏览器可以识别该属性 /
   -moz-transform: translate(100px, 120px);
   / 市面上现在流行使用postCss来解决css样式兼容性问题 /
   19./ 什么是transition？ /
   / transition是过渡的意思，将会时元素从一个状态用动画形式过渡到零一个状态 /
   / 参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition /
   / 使用过渡属性 /
   transition: all 2s linear;
   20./ transition复合属性可以拆解成以下属性 /
   / 过渡属性：声明一个需要产生过渡动画的属性 /
   / 可以同时声明多个属性，属性之间用逗号隔开 /
   / 待选项：
   all: 代表所有属性
   none: 没有任何属性
   /
   transition-property: opacity, transform;
transition-property: all;
   21./ 补间动画的时长 /
   transition-duration: 1s;
transition-duration: 1000ms;
   22./ 补间动画的速度曲线 /
   / 带选项：
   linear: 匀速播放动画
   ease-in: 慢进匀速出
   ease-out: 匀速进慢出
   ease-in-out: 慢进慢出
   steps(n): 声明有n个过渡阶段
   /
   transition-timing-function: linear;
   23./ 除了使用预制带选项，也可以手动赋值如下： /
   transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);
   24. / steps 函数 /
   transition-timing-function: steps(5);
   25./ 延迟播放动画的时间 /
   transition-delay: 1s;
   26./ 使用transition属性设置所有的过渡动画属性 /
   / 属性顺序如下：过渡属性名 过渡时长 速度曲线 延迟时间 /
   transition: all 3s ease-in-out;
/* transform: translateX(200px); */
   27. / 初始状态 /
   transform: translateX(0px);
   / 通过添加 active 类名来开启动画 /
   .box.active { transition: all 5s; /* 结束状态 */ transform: translateX(200px); }
   28.// 过渡动画事件
   // 过渡动画播放完成事件
   box.addEventListener('transitionend', ev => { console.log(ev); console.log('播放结束'); })
box.addEventListener('transitionstart', ev => { console.log(ev); console.log('开始播放'); })
   29./ animation动画 /
   / animation和transition的区别： /
   / transition 是通过属性变化，而产生过渡状态，而由浏览器自动创建补间动画 /
   / transition 在浏览器上动态修改css属性后，依然可以播放过渡动画 /
   / animation的状态是事先定义好的，后续改变css属性也不会播放新的动画 /
   / animation的动画状态不止起始状态和结尾状态，可以定义多个状态 /
   / animation是一个复合属性，由以下属性构成： /
   30./ 动画名称 /
   / 作用：用于告诉浏览器，该动画应用哪一个动画关键帧序列 /
   animation-name: move;
   31. / 动画播放时长 /
   animation-duration: 2s;
   32. / 动画播放的速度曲线 /
   animation-timing-function: linear;
   33. / 延迟播放的时间 /
   /* animation-delay: 1s; */
   34/ 动画播放次数 /
   / 带选项：
   infinite: 无限循环播放
   /
   animation-iteration-count: infinite;
animation-iteration-count: 2;
   35. / 动画播放方向 /
   / 带选项：
   normal：正向播放
   reverse: 反向播放
   alternate: 正向播放一次然后反向再播放一次
   alternate-reverse: 反向播放一次然后正向再播放一次
   /
   animation-direction: alternate-reverse;
   36/ 播放结束后，元素的最终状态模式 /
   /
   带选项：
   forwards：动画播放完后，保留最后一帧的状态
   backwards：动画播放完后，保留第一帧的状态
   both：动画播放完后，保留第一帧和最后一帧的状态和
   /
   animation-fill-mode: forwards;
   37./ 可以定义复合属性，取代上面的所有属性 /
   / 赋值顺序，可以参考如下顺序 /
   / duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name /
   / duration | timing-function | delay | name /
   / duration | name /
   animation: move 2s linear 0s forwards; }
   38./ 关键帧：动画播放时的几个关键状态 /
   / 序列：有序的队列 /
   / 定义一个关键帧序列 如下： /
   / 使用@keyframes定义关键帧序列，后面参数为：动画名 /
   @keyframes move { /* 起始状态 */ /* from { */ 0% { transform: translateX(0); color: #000; font-size: 16px; } /* 用百分比定义中间状态 */ 50% { transform: translateX(1000px); color: pink; font-size: 32px; } /* 结束状态 */ /* to { */ 100% { transform: translateX(500px); color: green; font-size: 64px; } }
   39. / 开启3d变换 /
   transform-style: preserve-3d;
   / 设置灭点距离屏幕的距离 /
   perspective: 500px;
   40.// 总结：
   // 要使用3d变换需要依序执行以下步骤：
   // 1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
   // 2. 在父元素上设置透视距离：perspective: 100px;
   // 3. 给场景添加演员，给场景元素添加子元素
   // 4. 在子元素上使用3d变换
   41. / 开启3d变换 /
   transform-style: preserve-3d;
   42. / 设置灭点 /
   perspective: 500px;
   43. / 透视原点(灭点的坐标) /
   perspective-origin: center center;
   44./ 匹配属性值包含指定内容的元素 /
   input[name*=e] { border: 3px solid red; }
   45. / 匹配属性值以指定内容开头的元素 /
   input[name^=s] { font-size: 24px; }
   46./ 匹配属性值以指定内容结束的元素 /
   input[name$=e] { background-color: greenyellow; }
   47. / 匹配属性值包含 dep- 开头的元素 /
   input[name|=dep] { border: 3px solid blue; }
   48. / 表单元素被禁用时的样式 */
   input:disabled { border: 3px solid red; }

   49./* disabled仅限于表单元素使用 */
   `.box:disabled {
       border: 3px solid black;
   }`
   

   .box { width: 200px; height: 100px; }
   50. /* checked代表被勾选的元素 /
   input[name=sex]:checked { width: 100px; height: 100px; }
   / 选中元素中的第一个字符 /
   .hw::first-letter { color: red; }
.p1 { width: 100px; height: 130px; word-wrap: break-word; }
   / 元素中的第一行内容 /
   .p1::first-line { color: green; }
   / 选中的内容 */
   .p2::selection { background-color: gold; }