CSS3新增特性详解（二） - html/css语言栏目：html

上篇博文主要介绍了CSS3新增特性中的静态特性，比如新的选择器、多背景图、阴影、渐变等。本文主要介绍CSS3中新增的动态特性，如过度、动画、变形等。       transitian：    -webkit-transition:all 0.5s linear 0.3s;    过度效果，习惯上也叫做渐变。只不过这个渐变是指为动态效果加上一个可视的过程，要与前文中颜色的渐变区分开。   这里还是别忘了在上文中提到的前缀问题，示例中为了节省时间所以只在加了测试用 浏览器的前缀。   transition：共四个参数：   1.渐变属性，包括none：停止渐变，all：默认值，元素产生任何属性值变化时都执行渐变效果，通常情况下都用all， indent：指定元素的某一属性值；   2.渐变过程的持续时间，默认值为0；   3.变化的速率，ease：逐渐变慢，linear：匀速，ease-in：加速，ease-out：减速，ease-in-out：先加速后减速，cubic-bezier：自定义；   每个属性都可以设置其具体的贝塞尔曲线值，不过一般情况下用linear匀速就足够了，太另类显得非主流。   4.变化的延迟时间。   之前在讲 CSS伪类的那篇文章中已经贴过渐变示例的GIF了。   先写一段代码如下：   复制代码         div{             width: 100px;             height: 100px;             background-color: red;         }         div:hover{             background-color: blue;         }     复制代码 效果：       加入渐变：   复制代码         div{             width: 100px;             height: 100px;             background-color: red;             -webkit-transition:all 0.5s linear 0.3s;         }         div:hover{             background-color: blue;         }     复制代码 效果：       这里要注意的是transition不仅可以对颜色的改变产生过度效果，也可以对尺寸、位置等等的属性均带来过度效果。   这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。         keyframes:   CSS3自带的动画特性，可以不借助JS来完成一些简单的动画效果。但是这里不得不说的是，keyframes的用处并不多，稍微复杂一点的动画用JS搭配CSS3的过度效果总是最理想的。    复制代码 @-webkit-keyframes divMove{             from{                 top: 0;                 left: 0;             }             to{                 top:200px;                 left: 200px;             }         }         div{             width: 100px;             height: 100px;             -webkit-border-radius: 50px;             position: absolute;             background-color: forestgreen;             -webkit-animation:divMove 2s infinite linear;         } 复制代码     首先创建动画规则，最开头用@符号，后接浏览器前缀，后接keyframes，之后是自己定的动画名称。from表示起始状态，to表示结束状态，大括号内写CSS样式。   定义完动画规则后，在你想要加入该动画的元素上添加animation。共有4个参数：1.自定义的动画名称 2.动画完成所用时间 3.infinite表示循环播放动画 4.变化速率，同transition。   效果：       定义动画规则时也可以这样写：    复制代码 0%{    background-color: red; } 25%{    background-color: blue; } 50%{    background-color: green; } 75%{    background-color: yellow; } 100%{    background-color: #8a2be2; } 复制代码 这样写法是将动画过程按想要的时间百分比细分，上例中from对应0%,to对应100%。   总之CSS3中的动画特性由于其局限性较大，在实际中运用并不多。       transform:   变形，它包括五种变换方式：   –旋转rotate –扭曲skew –缩放scale –移动translate –矩阵变形matrix 其中旋转和移动应用较多，在这里主要介绍下。扭曲和缩放由于会导致图形或图片等元素失真，实际应用很少。所以这里只是讲解下写法而不贴实例了，有兴趣的读者自己尝试吧。   rotate旋转： 现有一div块   加入旋转变换： div{    -webkit-transform:rotate(30deg); } 其中rotate后的括号里填旋转的度数，单位：角度（deg）。若值为正则顺时针旋转，为负则逆时针旋转。   效果：       这里还要提一点就是transform-origin(X,Y),它是用来定义元素基点，也就是元素变换的基准点，这旋转这个例子中也就是说绕着哪个点旋转。   X,Y可以是具体的值，也可以是百分比，也可以是top center bottom left right这样的参数。在未设置的情况下，默认为元素的几何中心。       translate移动：   黑框中有一绿色方块       移动：   #demo{         width: 100px;         height:100px;         background-color: seagreen;         -webkit-transform:translate(150px,0)       } 效果：       还可以写成translateX(x) translateY(y),表示只横向或纵向移动，括号里仅有一个参数。       scale缩放：   写法：scale(X,Y),其中X,Y表示横、纵向缩放倍数，基值为1。若大于1表示放大，小于1表示缩小，如scale(0.8,2.5)表示横向缩小到0.8倍，纵向放大到2.5倍。   与translate类似，缩放也可以单方向：scaleX(x)&scaleY(y)。       skew扭曲：   写法：skew(X,Y),X表示水平方向扭曲角度，Y表示垂直方向扭曲角度。如：skew(30deg,10deg)。同上，单方向扭曲：skewX(x)&skewY(y)。    #demo{             width: 100px;             height:100px;             background-color: seagreen;             -webkit-transform:skewX(30deg);         }     这种东西怎么能用在网页上呢？看的博主心理都扭曲了。