一、問(wèn)答
CSS3有哪些常見的新特性？
** 1、CSS 選擇器 **
例如：E:nth-child(even)，E :nth-child(odd)，E:not()，E:first-child，E:nth-last-child(n) ，E:nth-of-type(n)，E:nth-last-of-type(n)，E:last-child，E:first-of-type ，E:checked 等等
** 2、盒模型 **
例如：box-sizing: border-box
** 3、背景和邊框 **
- a、背景
background-clip 規(guī)定背景的繪制區(qū)域;
background-origin 規(guī)定背景圖片的定位區(qū)域;
background-size 規(guī)定背景圖片的尺寸; - b、邊框
border-image 設(shè)置所有邊框圖像的速記屬性。
border-radius 一個(gè)用于設(shè)置所有四個(gè)邊框- *-半徑屬性的速記屬性
box-shadow 附加一個(gè)或多個(gè)下拉框的陰影
** 4、文字特效 **
text-shadow屬性適用于文本陰影;
word-wrap:break-word 自動(dòng)換行屬性允許您強(qiáng)制文本換行
word-break: keep-all;//break-all 單詞拆分換行屬性
@font-face 規(guī)則
** 5、2D/3D轉(zhuǎn)換 **
Paste_Image.png
3D轉(zhuǎn)換屬性
3D 轉(zhuǎn)換方法
** 6、動(dòng)畫 **
Paste_Image.png
** 7、多列布局 **
Paste_Image.png
** 8、用戶界面 **
Paste_Image.png
** 9、漸變**
線性漸變（Linear Gradients）- 向下/向上/向左/向右/對(duì)角方向
徑向漸變（Radial Gradients）- 由它們的中心定義
以上具體詳情見此處：http://www.runoob.com/css3/css3-tutorial.html
補(bǔ)充：
1、關(guān)于3d轉(zhuǎn)換的資料可詳見： http://www.w3cplus.com/css3/css3-3d-transform.html
2、關(guān)于2d中的transform:matrix() 可詳見如下:
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
3、對(duì)于低版本IE（IE6-IE9）兼容CSS3方法可見：css3pie官網(wǎng) 或PIE使IE支持CSS3圓角盒陰影與漸變渲染
二、代碼
（一）、寫出如下 CSS3效果的簡(jiǎn)單事例
1、圓角， 圓形
2、div 陰影
3、2D 轉(zhuǎn)換：放大、縮小、偏移、旋轉(zhuǎn)
4、3D 轉(zhuǎn)換：移動(dòng)、旋轉(zhuǎn)
5、背景色漸變
6、過(guò)渡效果
7、動(dòng)畫
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circularA{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 10px;
background-color: #6633FF;
text-align: center;
line-height: 100px;
margin: 10px;
}
.circularB{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 50%;
background-color: #FF6699;
text-align: center;
line-height: 100px;
margin: 10px;
}
.shadow{
background-color: white;
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;
margin: 10px;
width: 50%;
height: 50%;
color: #666;
transform: rotate(-7deg);
}
.shadow>img{
width: 90%;
height: 90%;
margin-top: 20px;
}
.change2d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotate(9deg);
}
.change2d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.change2d:hover{
transform: matrix(1.5,0,0,1.5,50,50);
transition: all 1s;
}
.change3d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.change3d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.ct-3d{
/*transform-style:preserve-3d;*/
perspective: 160;
-webkit-perspective:160; /* Safari and Chrome */
perspective-origin:150% center;
-webkit-perspective-origin:150% center;/* Safari and Chrome */
}
.change3d:hover{
transform:rotateX(5deg) translate3d(250px,50px,10px);
transition: all 1s;
}
.bgGradient{
width: 400px;
height: 400px;
border-radius: 50%;
background: repeating-radial-gradient(red ,green,blue 10%);
}
.transitionEg{
width: 300px;
height: 500px;
margin: 50px 10px 10px 150px;
transform-style:preserve-3d;
}
.transitionEg img{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
}
.transitionEg img:nth-child(1){
z-index: 1;
opacity: .6;
}
.transitionEg img:nth-child(2){
z-index: 2;
-webkit-transform: scaleZ(3) rotateX(45deg);
transform: scaleZ(3) rotateX(45deg);
}
.transitionEg h3{
position: absolute;
top: 80%;
left: 20%;
}
.transitionCt{
position: relative;
-webkit-perspective: 4200;
perspective: 4200;
cursor: pointer;
}
.transitionCt:hover{
-webkit-perspective: 2200;
perspective: 2200;
transition: all 2s;
}
.btn{
margin: 20px 10px 200px 10px;
display: inline-block;
padding: 15px 25px;
font-size: 24px;
font-weight: bolder;
cursor: not-allowed;
text-align: center;
color: #fff;
border-radius: 15px;
background-color: #4caf39;
box-shadow: 0 20px #999;
}
@keyframes myfirstAnimation {
from { }
to{
background-color: #0c8e35;
box-shadow: 0 2px #666;
transform: translateY(12px);
}
}
.btn{
-webkit-animation: myfirstAnimation 2s linear 1.5s infinite;
animation: myfirstAnimation 2s linear 1.5s infinite;
/*-webkit-animation-name:myfirst;*/
/*-webkit-animation-duration:5s; 完成時(shí)間 */
/*-webkit-animation-timing-function:linear;規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。*/
/*-webkit-animation-delay:2s; 延遲時(shí)間*/
/*-webkit-animation-iteration-count:infinite; 循環(huán)次數(shù) */
/*-webkit-animation-direction:alternate; 是否反過(guò)來(lái)運(yùn)行*/
/*-webkit-animation-play-state:running;規(guī)定動(dòng)畫是否正在運(yùn)行或暫停*/
}
.animateEg{
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="circularA">圓角</div>
<div class="circularB">圓形</div>
<div class="shadow"><h3>美麗的風(fēng)景</h3></div>
<div class="change2d"><h3>鼠標(biāo)放上去我會(huì)放大</h3></div>
<div class="ct-3d">
<div class="change3d"><h3>鼠標(biāo)放上去我會(huì)移動(dòng)和旋轉(zhuǎn)</h3></div>
</div>
<div class="bgGradient"></div>
<div class="transitionCt">
<div class="transitionEg">
<h3>鼠標(biāo)放上來(lái)我會(huì)慢慢動(dòng)</h3>
</div>
</div>
<div class="animateEg">
<button class="btn">按鈕正在被連續(xù)按下</button>
</div>
</body>
</html>
預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/1/task44-1.html
（二）、實(shí)現(xiàn)如下全屏圖加過(guò)渡色的效果（具體效果隨意）
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
div{
background: url("./1.jpg") no-repeat center center ;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div:before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
content: "";
width: 50%;
background: linear-gradient(to bottom right , rgba(255,0,0,0), rgba(255,0,0,1)); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后）*/
}
div:after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
display: block;
content: "";
width: 50%;
background: linear-gradient(to bottom left, rgba(187, 61, 187,0),rgba(187, 61,187,1)); /* 標(biāo)準(zhǔn)的語(yǔ)法（必須放在最后）*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/2/task44-2.html
（三）、寫出如下 loading 動(dòng)畫效果
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.bg{
background-color: rgb(52,83,145);
width: 100%;
height: 100%;
position: relative;
}
.loding:before,
.loding,
.loding:after{
width: 20px;
height: 40px;
background-color: #ffffff;
position: absolute;
}
.loding{
top: 10%;
left: 40%;
}
.loding:before{
content: "";
display: block;
position: absolute;
top: 0;
left: -150%;
}
.loding:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 100%;
margin-left: 10px;
}
@keyframes myLodingFrames {
0%,80%,100% {
height: 40px;
box-shadow: 0 0 #fff;
}
20%{
height: 50px;
box-shadow: 0 -20px #fff;
}
}
.loding:before,
.loding,
.loding:after{
-webkit-animation: myLodingFrames 1s linear infinite ;
animation: myLodingFrames 1s linear infinite ;
}
.loding{
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
.loding:after{
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
</style>
</head>
<body>
<div class="bg">
<div class="loding"></div>
</div>
</body>
</html>
預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3A.html
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.bg{
background-color: rgb(52,83,145);
width: 100%;
height: 100%;
position: relative;
}
.loding{
width: 100px;
height: 100px;
border-top:20px solid rgba(255,255,255,0.2) ;
border-right:20px solid rgba(255,255,255,0.2);
border-bottom:20px solid #fff;
border-left:20px solid rgba(255,255,255,0.2);
border-radius: 50%;
position: absolute;
top: 10%;
left: 40%;
}
@keyframes myLodingFrames {
from {transform: rotate(0deg)}
to {transform: rotate(360deg) }
}
.loding{
-webkit-animation: myLodingFrames 1s linear 1.5s infinite;
animation: myLodingFrames 1s linear 1.5s infinite;
}
</style>
</head>
<body>
<div class="bg">
<div class="loding"></div>
</div>
</body>
</html>
預(yù)覽地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3B.html
**本文版權(quán)歸本人即簡(jiǎn)書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝！ *
