关于 CSS3 的理解,常用样式扎记,变形,转换,动画的实现方法

更好的教程:W3School

常用样式:

  1. 圆角(border-radius)

     /* 四个角同时进行半径为10px的圆角处理 */
     .demo01{
         border-radius:10px;
         -webkit-border-radius:10px;
         -moz-border-radius:10px;
     }
    
     /* 只对左下角和右下角进行半径为10px圆角处理 */
     .demo02{
         border-bottom-left-radius:10px;
         border-bottom-right-radius:10px;
         -webkit-border-bottom-left-radius:10px;
         -webkit-border-bottom-right-radius:10px;
         -moz-border-radius-bottomleft:10px;
         -moz-border-radius-bottomright:10px;
     }
    
     /* 只对左下角和右下角进行半径为10px圆角处理,效果同上 */
     .demo03{
         border-radius:0 0 10px 10px;
         -webkit-border-radius:0 0 10px 10px;
         -moz-border-radius:0 0 10px 10px;
     }
    

    更复杂的使用,非正圆角的定义,可参考:http://www.css3.info/preview/rounded-border/

  2. 阴影(box-shadow,text-shadow)

     /* 五个参数分别代表:左位移,上位移,羽化距离,扩展距离,阴影颜色 */
     .demo04 {
         box-shadow: 10px 10px 5px 0px #888;
         -moz-box-shadow: 10px 10px 5px 0px #888;
         -webkit-box-shadow: 10px 10px 5px 0px #888;
     }
     
     /* 设置内阴影,只需加入一个参数: inset */
    

    更详尽的说明和例子,可参考:http://www.css3.info/preview/box-shadow/

变形:

定义变形的CSS属性是transform,支持旋转,缩放,位移,倾斜,以及矩阵变换。

在学习效果实现之前,先理解一个属性:

transform-origin,它并不是transform的子属性,但用于定义transform变形的起点,定义旋转、位移、倾斜和矩阵变换的中心,对效果的实现具有重要意义,所以必须先理解transform-origin。

/* 默认是以图形的中心为变形起点 */
/* 即 50% 50% */
/* 百分比:图形的左边和上边为0%,右边和下边为100% */
.class1{
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
}
.class2{
    -moz-transform-origin:100% 100%;
    -webkit-transform-origin:100% 100%;
    -o-transform-origin:100% 100%;
}
.class3{
    -moz-transform-origin:top left;
    -webkit-transform-origin:top left;
    -o-transform-origin:top left;
}
  1. 旋转(rotate)

     /* 顺时针转动45度 */
     .demo05{
         transform:rotate(45deg);
         -moz-tranform:rotate(45deg);
         -webkit-transform:rotate(45deg);
         -o-transform:rotate(45deg);
     }
    

  1. 缩放(scale)

     /* 放大为原来的2倍 */
     .demo06{
         transform:scale(2);
         -moz-transform:scale(2);
         -webkit-transform:scale(2);
         -o-transform:scale(2);
     }
    

同时,scale 通过两个参数可对水平和垂直定义不同的变化比例,参数设置为负数还可以实现翻转:

	#nav {
	    /* nav元素的宽和高都会被放大双倍 */
	    -webkit-transform: scale(2);
	    -moz-transform: scale(2);
	    -o-transform: scale(2); }
	#nav {
	    /* nav元素的宽会是双倍,而高度保持不变 */
	    -webkit-transform: scale(2, 1); 
	    -moz-transform: scale(2, 1);
	    -o-transform: scale(2, 1);
	}
	#nav {
	    /* nav的宽度将是双倍,并且水平翻转,但是高度保持不变 */
	    -webkit-transform: scale(-2, 1); 
	    -moz-transform: scale(-2, 1); 
	    -o-transform: scale(-2, 1); 
	}

![](/content/images/2016/01/f4.png)
  1. 位移(translate)

     /* 向左位移10px,向下位移20px */
     .demo07{
         transform:translate(10px,20px);
         -moz-transform:translate(10px,20px);
         -webkit-transform:translate(10px,20px);
         -o-transform:translate(10px,20px);
     }
    

  2. 倾斜(skew)

     /* 向X轴倾斜45度,向Y轴倾斜-5度 */
     .demo08{
         -webkit-transform-origin:0% 0%;
         transform:skew(45deg,-5deg);
         -moz-transform:skew(45deg,-5deg);
         -webkit-transform:skew(45deg,-5deg);
         -o-transform:skew(45deg,-5deg);
     }
    

  3. 矩阵变换

    通过矩阵,能实现以上说到的那些效果,但我个人感觉有点难接受,需要几何学得很好才好上手。如果以后有进一步了解,再回来补充。

    有兴趣可看:http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined

过渡效果、动画:

  1. 过渡动画(transition)

    定义transition属性,可使生硬的触发变化变成渐变形式的过渡。

    譬如:

    下面一段CSS是传统常用的,鼠标放上<a>文字后,黑色的文字会马上变成红色

     a{color:#000000;}
     a:hover{color:#ff0000;}
    

    而以下一段CSS,鼠标放上<a>文字后,黑色的文字会在1秒时间内从黑色慢慢过渡为红色

     a{color:#000000;-webkit-transition:all 1s linear;-moz-transition:all 1s linear;}
     a:hover{color:#ff0000;}
    

    以下是详细的解释:

    -webkit-transition:all 3s linear 1s;

    • 第一个参数:-webkit-transition-property:all,表示要实现过渡的属性,若属性值是background-color,则除了background-color属性采用动态过渡,其他属性均保持传统的瞬时变化方式;
    • 第二个参数:-webkit-transition-duration:3s,表示过渡花费的时间为3秒;
    • 第三个参数:-webkit-transition-timing-function:linear,表示过渡动画的速度分配形式,有linear,ease,ease-in,ease-out等,分别代表匀速、两头慢中间快等等的方式,具体理解可借助百度搜索;
    • 第四个参数:-webkit-transition-delay:1s,表示过渡动画延迟1秒才开始;
  2. 自定义动画(animation)

    animation跟transition相似,但可自定义动画的变化形式以及循环

  3. 触发形式

  4. 配合JS

参考:http://www.qianduan.net/what-you-need-to-know-about-behavioral-css.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏