CSS3新特性

在项目开发中我们采用的CSS3新特性有 

1.CSS3的选择器

1）E:last-child 匹配父元素的最后一个子元素E。
2）E:nth-child(n)匹配父元素的第n个子元素E。 
3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

2. @Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

[css]  view plain  copy

 

1. @font-face {   
2.  font-family: BorderWeb;   
3.  src:url(BORDERW0.eot);   
4.  }   
5.  @font-face {   
6.  font-family: Runic;   
7.  src:url(RUNICMT0.eot);   
8.  }   
9.  .border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }   
10.  .event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }  

淘宝网字体使用

[css]  view plain  copy

 

1. @font-face {  
2.                font-family: iconfont;  
3.                src: url(//at.alicdn.com/t/font_1465189805_4518812.eot);                
4. }  

3. 圆角

[css]  view plain  copy

 

1. border-radius: 15px;  

4. 多列布局 （multi-column layout）

[html]  view plain  copy

 

1. <div class="mul-col">  
2.     <div>  
3.         <h3>新手上路</h3>  
4.         <p>新手专区 消费警示 交易安全 24小时在线帮助 免费开店</p>  
5.     </div>  
6.     <div>  
7.         <h3>付款方式</h3>  
8.         <p>快捷支付 信用卡 余额宝 蚂蚁花呗 货到付款</p>  
9.     </div>  
10.     <div>  
11.         <h3>淘宝特色</h3>  
12.         <p>手机淘宝 旺信 大众评审 B格指南</p>  
13.     </div>  
14. </div>  

[css]  view plain  copy

 

1. .mul-col{  
2.     column-count: 3;  
3.     column-gap: 5px;  
4.     column-rule: 1px solid gray;  
5.     border-radius: 5px;  
6.     border:1px solid gray;  
7.     padding: 10px   ;  
8. }  

兼容性不好，还不够成熟。还不能用在实际项目中。

5.阴影（Shadow） 

[css]  view plain  copy

 

1. .class1{   
2.      text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);   
3. }   

 

OPPO官网的阴影特效 http://www.oppo.com/cn/products.html

6.CSS3 的渐变效果 

[css]  view plain  copy

 

1. background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));  

这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。效果图如下：

7.css弹性盒子模型

[html]  view plain  copy

 

1. <div class="boxcontainer">  
2.     <div class="item">1</div>  
3.     <div class="item">2</div>  
4.     <div class="item">3</div>  
5.     <div class="item">4</div>  
6. </div>  
7. .boxcontainer {   
8.     width: 1000px;   
9.     display: -webkit-box;   
10.     display: -moz-box;   
11.     -webkit-box-orient: horizontal;   
12.     -moz-box-orient: horizontal;   
13. }   
14.               
15.  .item {   
16.     background: #357c96;   
17.     font-weight: bold;   
18.     margin: 2px;   
19.     padding: 20px;   
20.     color: #fff;   
21.     font-family: Arial, sans-serif;   
22. }  

效果图

8. CSS3制作特效

1) Transition 对象变换时的过渡效果

•  transition-property 对象参与过渡的属性
•  transition-duration 过渡的持续时间
•  transition-timing-function 过渡的类型
•  transition-delay 延迟过渡的时间

缩写方式：　　

[css]  view plain  copy

 

1. transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;  

拆分方式：

[css]  view plain  copy

 

1. transition-property:border-color, background-color, color;  
2. transition-duration:.5s, .5s, .5s;  
3. transition-timing-function:ease-in, ease-in, ease-in;  
4. transition-delay:.1s, .1s, .1s;  

 　　示例代码

[html]  view plain  copy

 

1. <style type="text/css">  
2.     .main{  
3.         position: relative;  
4.         margin: 0 auto;  
5.         height:45px;  
6.         width: 300px;  
7.         background-color:lightgray;  
8.         transition:background-color .6s ease-in 0s;  
9.     }  
10.     .main:hover{  
11.         background-color: dimgray;  
12.     }  
13. </style>  
14. <div class="main"></div>  

效果显示   

2) Transforms 2D转换效果

主要包括 translate（水平移动）、rotate（旋转）、scale（伸缩）、skew（倾斜）

[html]  view plain  copy

 

1. <style type="text/css">  
2.     .main{  
3.         position: relative;  
4.         top:200px;  
5.         margin: 0 auto;  
6.         height:45px;  
7.         width: 300px;  
8.         background-color:dimgray;  
9.         transition:transform .6s ease 0s;  
10.         transform: rotate(0deg);  
11.     }  
12.     .main:hover{  
13.         transform: rotate(180deg);  
14.     }  
15. </style>  
16.  <div class="main"></div>  

效果显示

3) Animation动画特效 

代码比较多不想解释了，要想弄明白看视频吧！（http://www.chuanke.com/3885380-190205.html）

[html]  view plain  copy

 

1. <style type="text/css">  
2.     .main{  
3.         position: absolute;  
4.         left: 10px;  
5.         top:200px;  
6.         height:45px;  
7.         width: 300px;  
8.         background-color:cadetblue;  
9.     }  
10.     .main:hover{  
11.         animation: animations 2s ease 0s;  
12.     }  
13.     @keyframes animations {  
14.         0%{  
15.             left: 10px;  
16.             opacity: 1;  
17.         }  
18.         50%,70%{  
19.             left: 50%;  
20.             opacity: .7;  
21.             margin-left:-150px;  
22.         }  
23.         100%{  
24.             left: 100%;  
25.             opacity: 0;  
26.             margin-left:-300px;  
27.         }  
28.     }  
29. </style>  
30.  <div class="main"></div>  

效果显示