CSS HACK 我们为了兼容不同低版本浏览器,而作的代码开发,叫做编写csshack
- webkit-
- moz-
- ms-
- o-
一 转换(*****)---transform
改变元素在页面中的位置,大小,角度,形状
transform:transform-function1 transform-function2...
转换属性:transform;
转换函数:2D的4个,3D的一个,
1 2D转换
只在x,y轴发生转换
**(1)位移**
transform:translate(x,y)
translate()只写一个值和translateX()作用相同---设置元素在x轴上的位移距离
translateY()设置元素在y轴上的位移距离
**(2)缩放**
transform:scale(val)
①val>1--放大
②<0val<1---缩小
③val<0---反转缩小/放大
scale(v1,v2)分别设置x,y轴的尺寸
scaleX()/scaleY()单独设置x,y轴的尺寸
**(3)旋转**
transform:rotate(ndeg)
n>0顺时针;n<0逆时针
transform-origin:v1 v2 转换原点:①px为单位的数字 ②x%,y%;③关键字:x-left/center/right y-top/center/bottom
旋转会带着坐标轴一起旋转,所以会影响旋转之后位移的位置
**(4)倾斜**
transform:skew(ndeg)
①取一个值等同于skewX(x):让元素的y轴向着x轴发生倾斜.度数为正是逆时针,度数为负是顺时针
2 3D转换
增加了z轴
(1)3D旋转
①透视距离
perspective:距离,此属性要加载到3D转换元素的父元素上.
transform:rotateX(ndeg)--按x轴转/rotateY(ndeg)/rotateZ(ndeg)
二 过渡
只能用伪类激活
两个css的值,在一段时间内平缓过渡的过程.
1 transition-property:属性/all
支持过渡的属性:
①颜色属性
②大多数取值为具体数值的属性
③阴影属性
④转换属性
⑤visibility:(过渡结束后消失)
2 过渡时长 transition-duration:s/ms;
3 过渡的时间曲线函数 transition-timing-function:
匀速:linear
ease:默认值,慢速开始,中间加速,减速结束
4 过渡的延迟
transition-delay:s/ms
简写方式
transition:property duration timing-function delay;
最简方式:
transition:duration;
5 过渡代码的编写位置
写在原本的样式中,过渡效果有去有回,写在伪类中,过渡效果有去无回
三 动画
让元素从一种样式,逐渐变化成其他样式
可以使用伪类触发,也可以使用f5刷新触发
1 关键帧
利用关键帧来控制动画的每一个状态.
2 使用
**(1)声明动画**
@keyframes 动画名称{
0%{样式1}
...
100%{样式}
}
注意:关键帧之间不能有分号;且0%可以用from代替,100%可以用to代替
**(2)使用动画**
在要调用的元素样式内
①animation-name:动画名称
②animation-duration:动画持续时间
③animation-timing-function:linear/ease/ease-in/ease-out/ease-in-out/(steps)---时间曲线函数
④animation-delay:s/ms;---动画延迟
**(3)动画的特有属性**
①动画的播放次数
animation-iteration-count:次数/infinite(无限)
②动画的播放顺序
animation-direction:normal(默认0-100)/reverse(反向)/alternate(轮流播放,奇数次正向播放,偶数次反向播放)
③设置动画之前的填充状态
animation-fill-mode:none(默认)/backwards(延迟时间内填充第一帧)/forwards(动画结束后,填充最后一帧)/both(前后都要)
④设置动画的播放状态
animation-play-state:paused(暂停)/running(播放)
**动画的简写方式:**
animation:duration timing-function delay count direction
最简:
animation:name duration
**动画的兼容性**
如果需要兼容低版本浏览器,需要写css hack
@keyframes 动画名称{关键帧}
CSS HACK
@-webkit-keyframes{}
@-mos-keyframes{}
@-mz-keyframes{}
@-o-keyframes{}