<!--
一.转换
1.什么是转换
改变元素在页面中的位置，大小，角度，以及形状
2D转换，在x轴和y轴上发送转换效果
3D转换，增加了z轴上的转换效果
2.转换属性
transform：transform-function transform-function....
取值 转换函数 deg
none默认
可以使用空格链接多个转换函数
3. 2D转换
transfotm：translate（）
①位移 translate
translate（x）让元素在x轴上位移 正数往右，负数往左
translateX（x）让元素在x轴上位移 正数往右，负数往左
translateY（y）让元素在y轴上唯一 正数往下，负数往上
translate（x，y）让元素在xy轴上位移
②缩放 scale（）
scale（value）x轴和y轴同时缩放
value>1是放大倍数
0<value>1是缩小倍数
-1<value<0 缩小并反转
value<-1 放大并反正 x轴和y轴同时反转
scaleX()
scaleY()
scale(x,y)
③旋转 rotate
tansform：rotate（10deg）
rotate（ndeg）正值顺时针，负值逆时针
转换原点会对旋转效果产生影响
transform-origin：
取值：1xpx 1ypx
x% y%
关键字
x：left/center/right
y:top/center/bottom
位移是根据坐标轴的方向位移，但是旋转是连同坐标轴一起旋转的，所以旋转之后的位移，会出现偏差。
④倾斜
transform：skewX（45deg）
skewX 让y轴向着x轴倾斜n度，n：正数逆时针，负数顺时针
skewY 让x轴想着y轴倾斜n度，n：整数顺时针，负数逆时针
skew（x，y）分别设置x轴和y轴的倾斜角度
-->
<!--
面试题；css让一个div在任何情况下，都处于页面正中学
width:200px;height:200px;
background:#f0f;
position:absolute;绝对定位
top：50%; left:50%;
transform:translate(-100px,-100px);
-->
<!--
4. 3D转换
所有的3D都是模拟
1.透视距离
模拟人的燕姐到3D转换元素之间的距离，距离不同，看到的效果就不同
perspective：距离 此属性要设置在3D转换元素的父元素上
2.3D旋转
transform：
取值rotateX（x deg） 以x轴为中心轴，旋转
rotateY（Y deg） 以Y轴为中心轴，旋转
totateZ（z deg） 以z轴为中心轴，旋转
rotate3D（x，y，z，0deg）3条轴一块旋转，x/y/z取值0代表不参与旋转
-->
<!--
五.过度
让css的值，在一段时间内平缓变化的效果
1.语法
transitiong-property：background; 指定过渡属性：背景色/：all是让能参与过渡属性的属性都参与
transition-duration：3s; 指定过渡时长
支持过渡的属性：1.大多数取值为具体数字的属性
2.颜色属性/背景图片
3.阴影
4.转换
5.显示效果visibility/延迟隐藏，擦边属性
2.过渡时长
transition-duration：s/ms
3.过渡时间曲线函数
transition-timing-function：linear（均速）
ease（默认值）慢速开始，中间加速变快，慢速结束
ease-in 慢速开始，持续加速结束
ease-out 快速开始，持续减速结束
ease-in-out 慢速开始，中间加速，再减少，慢速的结束
cubic-bezier（）曲线，课外知识
4.过渡的延迟时间
transition-delay：2s 延迟2秒再执行
取值 s/sm
5.过渡代码的编写
写在原来的样式里，过渡效果有去有回 推荐写再原来样式中
写在：hover中，过渡效果有去无回
6.过渡的简写方式
transition：property duration timing-function delay
过渡属性 过渡时长 过渡时间曲线速度函数 过渡延迟时间
最简方式：transition：duration
-->
<!--
使用过渡的时间
1.css的值，只有两个状态（起点和终点两个状态），多个状态不可使用
2.必须是hover激活才能使用hover
动画
1.css的值有多个状态
2。可以使用hover，也可以不用hover
-->
<!--
六.动画
1.什么是动画
是元素从一种状态逐渐变为另一种状态（多个状态，其实动画就是多个过渡效果放在一起，动画就是过渡的升级版
2.使用关键帧，来控制动画的每一个状态
动画执行时间点，是在这个时间点上的样式
3.使用动画的步骤
①声明动画
@keyframes 动画名称{
关键帧1 0%{样式}
关键帧2 25%{样式}
}
②调用动画
1·选中要使用的动画
animation-name:动画名称
2·动画的执行时间
animation-duration: s/ms
3·动画的时间曲线函数
animation-tming-function: ease/linear/ease-out/ease-in-out
4·动画的延迟
animation-delay: s/ms
4·动画的播放次数
①animation-iteration-count：具体数字或者infinite（无限次播放）
②动画的播放顺序
animation-direction: normal默认值0%~100%
reverse 逆向播放100%~0%
alternate 轮流播放 0%~100% 100%~0% ......
动画的简写方式anmimation：动画名称/执行时间/时间曲线函数/延迟时间/播放次数/播放顺序
最简方式animation：动画名称 执行时间
③动画的填充模式
延迟时间内，填充动画的第一帧
在播放完毕后，填充动画的最后一帧
animation-fill-mode: backwards 延迟时间内，填充动画的第一帧
forwards 在播放完毕后，填充动画的最后一帧
both 两个效果都要
none 默认效果取消
⑩动画的播放模式
animation-play-state：paused 暂停
running 播放
5·动画的兼容性
如果需要兼容低版本浏览器，需要添加前缀
只有在声明动画添加内核
@keyframes 动画名{}
@-webkit-keyframes 动画名称{}
@-ms-keyframes 动画名称{}
@-o-keyframes 动画名称{}
@-moz-keyframes 动画名称{}
总结：
使用动画的时间
css 的值，两种或者两种以上的动态
页面一刷新，可以指定启动动画，也可以用hover
6.一般工作中都是使用animate.css第三方动画库，很少有人自己做
-->
<!--
七.css优化
① 优化的目的
1.减少服务器端压力
2.提高用户体验
② css优化原则
尽量减少http的请求个数
在页面顶部引入css文件
将css和js文件放在独立的文件中
③ 精灵图（雪碧图）
把许多小图片集中在一张大图中，使用css背景图改变背景图的大小和位置
让元素只显示大图片中的某一个小图标
除了加载第一张小图片的时候，需要发送请求
其 他图标都可以使用第一次加载之后，生成的缓存，就不需要发送请求了
⑩css代码优化
合并样式（选折起能够一起写，就不要一个个写）
缩小css样式的文件大小
尽量的使用简写方式
避免出现空的src和href
-->
<!--
八·css reset和nromalize.css
1.什么是css reset
把不同浏览器的默认样式，进行统一，或者清除
*{margin：0；padding：0；}
css reset很暴力，一键清除了浏览器原有的默认值，从零开始写
Eric.css
2.normailize.css
是css reset另外一种解决方案
相对和平，保留有价值的默认值
-->
|
站长QQ
发表于 2021-9-11 16:16:40
置顶卡
沉默卡
变色卡