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 规定标点字符是否位于线框之外。 3punctuation-trim    规定是否对标点字符进行修剪。  3text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。    3text-emphasis   向元素的文本应用重点标记以及重点标记的前景色。 3text-justify    规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3text-outline    规定文本的轮廓。    3text-overflow   规定当文本溢出包含元素时发生的事情。  3text-shadow 向文本添加阴影。    3text-wrap   规定文本的换行规则。  3word-break  规定非中日韩文本的换行规则。  3word-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 转换元素的透视视图。