前端学习笔记记录04

CSS3

新增 1.响应式布局 （媒体查询）

        2.移动端布局 （flex查询）

        3.过渡、动画

需要加入浏览器前缀

例：

border:                                                     -o-border: 欧鹏  

-webkit-border: 谷歌                                -ms-border: IE

-moz-border: 火狐                                    -moz-border: 火狐

-ms-border: IE                                          -webkit-border: 谷歌 

-o-border: 欧鹏                                         border: 

优雅降级：向下兼容                                渐进增强：向上兼容

2D转换

transform: translate (x,y) 平移

transform: rotate （0-360deg）旋转

transform: scale （） 放大

 transform: skew （） 拉伸

浮动元素绝对居中

position:absolute;
left:50%;
top:50%;
transfrom: translate (-50%,-50%);

3D转换

注：先移再转 与 先转再移 不同

2D转换属性+X/Y/Z  在X/Y/Z轴上转换

例：transform: translateX(10px) 在X轴上平移5px

默认视角：X轴调左右 Y轴调上下 Z轴调远近

构造3d环境，以3d效果来处理

perspective:3d(视距) 属性赋给外层大容器

transform-style:preserve-3d;

transform-origin:50%,50%;(以中心点位基准转换)

过渡（:hover）

注：添加在需要该效果的原元素上

transition: 集合 all xs
transition-property: (过渡属性 必须)
transition-duration: (过渡时间 必须)
transition-timing-function: (过渡方式)
transition-delay: (延迟时间)

display:none/block 无法过渡
想要完成该效果可以过渡高度 0->x

CSS动画

定义动画：

@keyframes name {
    关键帧  from {样式}
            to {样式}
}

调用 （默认只调用一次）：

animation:集合
animation-name:
animation-duration: (时间)
animation-timing-function:（方式）
animation-iteration-count: (次数)
animation-direction:alternate (循环往复)
animation-play-state:pause (暂停)