CSS3中二維三維以及漸變過程簡單總結(jié)及效果(動(dòng)圖不好發(fā))

一. 不動(dòng),區(qū)域內(nèi)的變化(本質(zhì)生產(chǎn)一張圖片)

/*漸變

1 長方形之漸變先定義長方形的寬高大小(好觀察最好加邊框) /*方向 顏色 位置*/ 利用 background-image: -webkit-linear-gradient(right top,red 50% ,blue 50%); 2 大圓中小圓變色 先做一個(gè)大圓 /*變化圓心 從內(nèi)到外依次填充顏色*/ background-image: -webkit-radial-gradient(50% 50%,yellow 20% ,red 50%, pink 55%, blue 100%); /*也可以在矩形中以圓漸變*/ 3 倒影

.testb{

background-image: url(img/5.jpg);

height: 200px;

/*方向 間距 漸變*/

/*上 above 下below*/

/*1 倒影不占文檔流的空間 層級(jí)高于文檔流

2 倒影是針對(duì)標(biāo)簽(寬高)進(jìn)行的*/

-webkit-box-reflect: above 20px -webkit-linear-gradient(top,rgba(0,0,0,0) 0% ,rgba(0,0,0,0.5) 100%);

}

4 邊框比較寬并且4個(gè)邊框顏色不一樣,在相遇的角會(huì)形成顏色不一的三角形,(內(nèi)容為0做圓后可以制作吃豆豆,)

5 border-radius: 50px 0 50px 50px;用于切圓角

橢圓的制作

.textG{

width: 200px;

height: 100px;

border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;

}

二.二維平面內(nèi)的移動(dòng)

.test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋轉(zhuǎn) 平移 縮放 )

transition: all 3s ease .5s;(變化過程)}

.test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}

三種效果也可分開單獨(dú)用,并且不同先后順序效果不同

三.三維空間內(nèi)的動(dòng)畫效果

body{perspective:1000px;}/*在body中加透視點(diǎn)*/

.父標(biāo)簽{ transform-style:preserve-3d;}/*在其父標(biāo)簽中開3D效果*/

.test{ transform:rotate(0deg) translate(0px,0px) scale(1);(旋轉(zhuǎn) 平移 縮放 ) (沒動(dòng)之前的初始值,可以不加,有默認(rèn)值)

transition: all 3s ease .5s;(變化過程必須有)}

.test:hover{transform:rotate(720deg) translate(500px,300px) scale(2);}(變化后的位置)

/*在開3D效果下 可以設(shè)置Z軸效果*/

四.幀動(dòng)畫

@keyframes 動(dòng)畫名(自取){

0%(from){transform:…}

?% {transform:…}

?% {transform:…}

100%(to){transform:…}

}

.test:hover{

/*動(dòng)畫效果的賦值方式和transition一樣*/

animation:movet 1s ease;

/*動(dòng)畫執(zhí)行的字?jǐn)?shù)無限循環(huán) infinite */

animation-iteration-count: infinite;

}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com