变形:平移:tranform:translateX Y Z(100px)
旋转:tranform:rotateX Y Z(360deg)-默认Z轴
缩放:tranform:scaleX Y Z(3)-变换点在中心点,默认整体缩放
拉扯(倾斜):tranform:skewX Y(60deg)-默认X轴
变换圆点:tranform-origin:left top
注意:1.使用变形后标签不会脱离文档流
2.Z轴在视觉上没有什么变化
3.旋转后坐标轴随着元素旋转
4.坐标轴X向右为正方向Y向下为正方向Z向外为正方向
过度:transition:属性名 过渡时间 延迟时间 速度曲线
transition在不适应动画的情况下变换状态:transition:all 1s 1s linear
渐变:背景图:渐变(方向,颜色1 百分比,颜色2 百分比,...)
linear-gradient:线性渐变
radial-gradient:镜像渐变
百分比:在渐变的方向上达到百分比比例的时候达到颜色值的正值其他两边全部都是过度值
滤镜:模糊:filter:blur(1px) 、亮度:filter:brigtness(2) 、阴影:filter:drop-shadow(5px 5px 5px pink) 、
灰度:filter:grayscale(1) 、色相转变:filter:hue-rotate(90deg) 、透明度:filter:opacity(.25) 、反转:filter:invet(1) 、饱和度:filter:saturate(4.25) 、褐色:filter:sepia(.5)
阴影:水平阴影 垂直阴影 模糊距离 阴影颜色
box-shawd:针对盒模型
text-shawd:针对文本
CSS浏览器兼容: -wedkit- 谷歌
-o- 欧朋
-moz- 火狐
-ms- IE浏览器
字体服务:@font-face{font-family:my-font;src:url();}
div{font-family:my-font}