css3学习笔记1: 新样式属性的初步了解

浏览数：12 / 时间：2015年06月09日

css3确实很强大，解决了很多之前比较麻烦的问题，比如圆角。为网页提供更好的体验创造了可能性。

个人觉得比较常用的css3属性有：box-shadow, border-radius, text-shadow.

比较喜出望外的属性有：transition, animation.

text-shadow: leftpx toppx blurpx color;

box-shadow:leftpx toppx blurpx color;

~~ blurpx是以边界为中心向内向外虚化的像素值如(10px 10px 3px #000), 其实 7 8 9 11 12 13是虚化像素 10是虚化中心

border-radius:npx;

~~~以上几个属性在chrome下测试不用浏览器前缀也是可以的，可能向下兼容性没那么好而已

transform:scale(n);

transform:skew(xdeg,ydeg);

transform:rotate(ndeg);

transform:translate(xpx,ypx); transform:translateX(npx); transform:translateY(npx);

~~~ 这个transform属性的效果完全和PS的变形工具一样可以参照理解，这个属性必须带浏览器前缀如： -webkit-transform:rotate(30deg); ie9不支持这个属性

---- 传说中的css3动画 ---

transition:property duration timing-function,....

~~~ 可以同时设置几个属性同时变化的动画,例子可参照下面的代码也是要带浏览器前缀

animation:tween duration timing-function

先定义动画如：

@-webkit-keyframes bgAnm{

0%{background:#f00;}

50%{background:#0f0;}

100%{background:#00f;}

}

然后调用动画

#test:hover{ -webkit-animation:bgAnm 2s linear;}

Animations与transition有神马区别？
　　使用transition时只能通过指定属性的开始值和结束值，然后在这两个属性之间进行平滑过渡的方式来实现动画效果，因此它不能实现比较复杂的动画效果；而Animations则可以通过多种方式定义中的元素属性值来实现更为复杂的动画效果。

具体例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<style>
*{margin:0; padding:0;}
body{}
.main{padding:30px; padding-bottom:500px;}
.box{width:200px; height:100px; margin:20px; border:1px solid #aaa;}
.ma{margin:auto;}
.fl{float:left;}
.fr{float:right;}

.tShadow{text-shadow:6px 6px 2px #000;}
.bShadow{box-shadow:10px 10px 3px darkblue;}
.bRadius3{border-radius:3px; border:1px solid hotpink;}
.tForm_r{-webkit-transform:rotate(30deg);}
.tForm_s{-webkit-transform:scale(2);}
.tForm_sk{-webkit-transform:skew(-30deg);}
.tForm_tran{-webkit-transform: translate(100px, 100px); width:300px;}

.transition{background:pink; -webkit-transition:background 1s linear; cursor:pointer;}
.transition:hover{background:skyblue;}

.transition2{-webkit-transition:height 1s linear; cursor:pointer;}
.transition2:hover{height:300px;}
.transition_m{-webkit-transition:width 1s linear, background 1s linear; margin-top:200px; background:orange;}
.transition_m:hover{width:300px; background:purple;}

    @-webkit-keyframes bgAnm{
        0%{background:#f00;}
        50%{background:#0f0;}
        100%{background:#00f;}
    }
.animation:hover{-webkit-animation:bgAnm 5s linear; }
</style>
</head>
<body>
<div class="main">
    <div class="box tShadow bShadow">text-shadow box-shadow测试</div>
    <div class="box bRadius3">border-radius测试</div>
    <div class="box tForm_r">transform:rotate();测试 要带浏览器前缀才行  ie9并不支持transform属性</div>
    <div class="ma box tForm_s">transform:scale();测试 要带浏览器前缀才行  ie9并不支持transform属性</div>
    <div class="ma box tForm_sk">transform:skew(n1 [,n2]);测试 要带浏览器前缀才行  ie9并不支持transform属性</div>
    <div class="box tForm_tran">transform:translate(x,y);测试 要带浏览器前缀才行  单独一个方向的偏移 -webkit-transform:translateX(npx); -webkit-transform:translateY(npx);</div>
    <div class="box transition fr">传说中的CSS3动画 transition:property duration timing-function;</div>
    <div class="box transition2 fr">传说中的CSS3动画 transition:property duration timing-function;</div>
    <div class="box transition_m">传说中的CSS3动画 多个属性动画 transition_m:property duration timing-function,pro, duration, t-fn;</div>
    <div class="box animation">更高级的动画 animation</div>
</div>
</body>
</html>