css3大总结-面使用

1 这里为了面试总结一些常用的css3的用法

2 css3动画 animatition

//css
@keyframes firstAnimate{
  form{
      background:red;
  }
  to{
      backgrounf:yellow;
  }
}
// 当然我们可以用100% >> 0%  
@-webkit-keyframes firstAnimate /* Safari 与 Chrome */{
    from {background: red;}
    to {background: yellow;}
}

div{
    animation:firstAnimate 5s;
    webkit-animation:firstAnimate 5s;
}
// animation有很多属性需要熟悉
animation-timing-function : ease|ease-in|ease-out|linear|

//demo 所有属性一览
div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

3 css3的transition

div{
 width:200px;
 height:200px;
 transition:width 2s;
 webkit-transition:width:width 2s;
}

div:hover{
 width:300px;
}

//当然你可以改变多项
div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

//property 过渡属性名称
//duration 过渡时间
// timing-function 过渡时间曲线
// delay 时间延迟
div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

4 css3多列 column（可以使用多列进行简单的瀑布流布局）

//count 多少列
//gap 列之间的间隙
//count-rule 各种规则
column-count    指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap  指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color   指定两列间边框的颜色
column-rule-style   指定两列间边框的样式
column-rule-width   指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width    指定列的宽度
columns 设置 column-width 和 column-count 的简写

5 css3 的flex布局弹性盒子(阮一峰教程)

display         指定 HTML 元素盒子类型。
flex-direction  指定了弹性容器中子元素的排列方式
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items     设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap       设置弹性盒子的子元素超出父容器时是否换行。
align-content   修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow       flex-direction 和 flex-wrap 的简写
order           设置弹性盒子的子元素排列顺序。
align-self      在弹性子元素上使用。覆盖容器的 align-items 属性。
flex            设置弹性盒子的子元素如何分配空间。

6 css3 的文本效果

//1 文本阴影，盒子阴影
//shadow前两个是阴影的大小 后一个是模糊大小
//box-shadow:5px 5px || 10px（模糊作用）
h1
{
    text-shadow: 5px 5px 5px #FF0000;
}
div {
    box-shadow: 10px 10px 5px #888888;
}
//你用阴影效果可以做文本和盒子卡片
div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim    规定是否对标点字符进行修剪。  3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。    3
text-emphasis   向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify    规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline    规定文本的轮廓。    3
text-overflow   规定当文本溢出包含元素时发生的事情。  3
text-shadow 向文本添加阴影。    3
text-wrap   规定文本的换行规则。  3
word-break  规定非中日韩文本的换行规则。  3
word-wrap   允许对长的不可分割的单词进行分割并换行到下一行。    3

7 css3 2d和3d转换

//2d 转换参数
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。
translate(x,y)  定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)   定义 2D 转换，沿着 X 轴移动元素。
translateY(n)   定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)  定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)   定义 2D 缩放转换，改变元素的宽度。
scaleY(n)   定义 2D 缩放转换，改变元素的高度。
rotate(angle)   定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)   定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)    定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)    定义 2D 倾斜转换，沿着 Y 轴。

转换属性
下表列出了所有的转换属性：
属性  描述  
transform   向元素应用 2D 或 3D 转换。   
transform-origin    允许你改变被转换元素的位置。  
transform-style 规定被嵌套元素如何在 3D 空间中显示。    
perspective 规定 3D 元素的透视效果。  
perspective-origin  规定 3D 元素的底部位置。  
backface-visibility 定义元素在不面对屏幕时是否可见。    


//3D 转换方法
函数  描述
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n)    定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)  定义 3D 转化。
translateX(x)   定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)   定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)   定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)  定义 3D 缩放转换。
scaleX(x)   定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)   定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)   定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)   定义 3D 旋转。
rotateX(angle)  定义沿 X 轴的 3D 旋转。
rotateY(angle)  定义沿 Y 轴的 3D 旋转。
rotateZ(angle)  定义沿 Z 轴的 3D 旋转。
perspective(n)  定义 3D 转换元素的透视视图。