neAnime是精美的動(dòng)漫在線觀看網(wǎng)站HTML5模板,也可以作為動(dòng)漫新聞和博客網(wǎng)站的界面。模板使用紫黑色的UI設(shè)計(jì),看起來(lái)很漂亮。模板編碼基于Bootstrap v4.1.3框架,很容易自定義。
主要特色
義和用法
一些 CSS 屬性是可以有動(dòng)畫效果的,這意味著它們可以用于動(dòng)畫和過(guò)渡。
動(dòng)畫屬性可以逐漸地從一個(gè)值變化到另一個(gè)值,比如尺寸大小、數(shù)量、百分比和顏色。
瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。
緊跟在數(shù)字后面的 -webkit-, -moz-, 或 -o- 指定了第一個(gè)支持該屬性的瀏覽器版本前綴。
4.0 -webkit- | 10.0 | 16.05.0 -moz- | 4.0 -webkit- | 15.0 -webkit-12.112.0 -o- |
實(shí)例
背景顏色逐漸地從紅色變化到藍(lán)色:
@keyframes mymove
{
from {background-color:red;}
to {left:blue;}
}
/*Safari 和 Chrome:*/
@-webkit-keyframes mymove
{
from {background-color:red;}
to {background-color:blue;}
}
動(dòng)畫屬性
CSS 中的動(dòng)畫屬性:
屬性 | 實(shí)例 |
---|---|
background | 嘗試一下 》 |
background-color | 嘗試一下 》 |
background-position | 嘗試一下 》 |
background-size | 嘗試一下 》 |
border | 嘗試一下 》 |
border-bottom | 嘗試一下 》 |
border-bottom-color | 嘗試一下 》 |
border-bottom-left-radius | 嘗試一下 》 |
border-bottom-right-radius | 嘗試一下 》 |
border-bottom-width | 嘗試一下 》 |
border-color | 嘗試一下 》 |
border-left | 嘗試一下 》 |
border-left-color | 嘗試一下 》 |
border-left-width | 嘗試一下 》 |
border-right | 嘗試一下 》 |
border-right-color | 嘗試一下 》 |
border-right-width | 嘗試一下 》 |
border-spacing | 嘗試一下 》 |
border-top | 嘗試一下 》 |
border-top-color | 嘗試一下 》 |
border-top-left-radius | 嘗試一下 》 |
border-top-right-radius | 嘗試一下 》 |
border-top-width | 嘗試一下 》 |
bottom | 嘗試一下 》 |
box-shadow | 嘗試一下 》 |
clip | 嘗試一下 》 |
color | 嘗試一下 》 |
column-count | 嘗試一下 》 |
column-gap | 嘗試一下 》 |
column-rule | 嘗試一下 》 |
column-rule-color | 嘗試一下 》 |
column-rule-width | 嘗試一下 》 |
column-width | 嘗試一下 》 |
columns | 嘗試一下 》 |
filter | 嘗試一下 》 |
flex | |
flex-basis | 嘗試一下 》 |
flex-grow | 嘗試一下 》 |
flex-shrink | 嘗試一下 》 |
font | 嘗試一下 》 |
font-size | 嘗試一下 》 |
font-size-adjust | |
font-stretch | |
font-weight | 嘗試一下 》 |
height | 嘗試一下 》 |
left | 嘗試一下 》 |
letter-spacing | 嘗試一下 》 |
line-height | 嘗試一下 》 |
margin | 嘗試一下 》 |
margin-bottom | 嘗試一下 》 |
margin-left | 嘗試一下 》 |
margin-right | 嘗試一下 》 |
margin-top | 嘗試一下 》 |
max-height | 嘗試一下 》 |
max-width | 嘗試一下 》 |
min-height | 嘗試一下 》 |
min-width | 嘗試一下 》 |
opacity | 嘗試一下 》 |
order | 嘗試一下 》 |
outline | 嘗試一下 》 |
outline-color | 嘗試一下 》 |
outline-offset | 嘗試一下 》 |
outline-width | 嘗試一下 》 |
padding | 嘗試一下 》 |
padding-bottom | 嘗試一下 》 |
padding-left | 嘗試一下 》 |
padding-right | 嘗試一下 》 |
padding-top | 嘗試一下 》 |
perspective | 嘗試一下 》 |
perspective-origin | 嘗試一下 》 |
right | 嘗試一下 》 |
text-decoration-color | 嘗試一下 》 |
text-indent | 嘗試一下 》 |
text-shadow | 嘗試一下 》 |
top | 嘗試一下 》 |
transform | 嘗試一下 》 |
transform-origin | 嘗試一下 》 |
vertical-align | 嘗試一下 》 |
visibility | |
width | 嘗試一下 》 |
word-spacing | 嘗試一下 》 |
z-index | 嘗試一下 》 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
文主要內(nèi)容
transition的中文含義是過(guò)渡。過(guò)渡是CSS3中具有顛覆性的一個(gè)特征,可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過(guò)渡(補(bǔ)間動(dòng)畫),經(jīng)常用來(lái)制作動(dòng)畫效果。
transition 包括以下屬性:
上面的四個(gè)屬性也可以寫成綜合屬性:
transition: 讓哪些屬性進(jìn)行過(guò)度 過(guò)渡的持續(xù)時(shí)間 運(yùn)動(dòng)曲線 延遲時(shí)間; transition: all 3s linear 0s;
其中,transition-property這個(gè)屬性是尤其需要注意的,不同的屬性值有不同的現(xiàn)象。我們來(lái)示范一下。
如果設(shè)置 transition-property: width,意思是只讓盒子的寬度在變化時(shí)進(jìn)行過(guò)渡。效果如下:
如果設(shè)置 transition-property: all,意思是讓盒子的所有屬性(包括寬度、背景色等)在變化時(shí)都進(jìn)行過(guò)渡。效果如下
案例:小米商品詳情
效果如下:
轉(zhuǎn)換是 CSS3 中具有顛覆性的一個(gè)特征,可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放,甚至支持矩陣方式。
轉(zhuǎn)換再配合過(guò)渡和動(dòng)畫,可以取代大量早期只能靠 Flash 才可以實(shí)現(xiàn)的效果。
在 CSS3 當(dāng)中,通過(guò) transform 轉(zhuǎn)換來(lái)實(shí)現(xiàn) 2D 轉(zhuǎn)換或者 3D 轉(zhuǎn)換。
1、縮放:scale
格式:
transform: scale(x, y); transform: scale(2, 0.5);
參數(shù)解釋: x:表示水平方向的縮放倍數(shù)。y:表示垂直方向的縮放倍數(shù)。如果只寫一個(gè)值就是等比例縮放。
取值:大于1表示放大,小于1表示縮小。不能為百分比。
格式舉例:
效果:
上圖可以看到,給 box1 設(shè)置 2D 轉(zhuǎn)換,并不會(huì)把兄弟元素?cái)D走。
2、位移:translate
格式:
transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%);
參數(shù)解釋:
格式舉例:
效果:
上圖中,因?yàn)槲以诓僮鞯臅r(shí)候,鼠標(biāo)懸停后,立即進(jìn)行了略微的移動(dòng),所以產(chǎn)生了兩次動(dòng)畫。正確的效果應(yīng)該是下面這樣的
應(yīng)用:讓絕對(duì)定位中的盒子在父親里居中
我們知道,如果想讓一個(gè)標(biāo)準(zhǔn)流中的盒子在父親里居中(水平方向看),可以將其設(shè)置margin: 0 auto屬性。
可如果盒子是絕對(duì)定位的,此時(shí)已經(jīng)脫標(biāo)了,如果還想讓其居中(位于父親的正中間),可以這樣做:
div { width: 600px; height: 60px; position: absolute; 絕對(duì)定位的盒子 left: 50%; 首先,讓左邊線居中 top: 0; margin-left: -300px; 然后,向左移動(dòng)寬度(600px)的一半 }
如上方代碼所示,我們先讓這個(gè)寬度為600px的盒子,左邊線居中,然后向左移動(dòng)寬度(600px)的一半,就達(dá)到效果了。
現(xiàn)在,我們還可以利用偏移 translate 來(lái)做,這也是比較推薦的寫法:
div { width: 600px; height: 60px; background-color: red; position: absolute; 絕對(duì)定位的盒子 left: 50%; 首先,讓左邊線居中 top: 0; transform: translate(-50%); 然后,利用translate,往左走自己寬度的一半【推薦寫法】 }
3、旋轉(zhuǎn):rotate
格式:
transform: rotate(角度); transform: rotate(45deg);
參數(shù)解釋:正值 順時(shí)針;負(fù)值:逆時(shí)針。
效果:
注意,上方代碼中,我們給盒子設(shè)置了 transform 中的 rotate 旋轉(zhuǎn),但同時(shí)還要給盒子設(shè)置 transition 過(guò)渡。如果沒(méi)有這行過(guò)渡的代碼,旋轉(zhuǎn)會(huì)直接一步到位,效果如下:(不是我們期望的效果)
案例1:小火箭
上方代碼中,我們將 transform 的兩個(gè)小屬性合并起來(lái)寫了。
案例2:撲克牌
rotate 旋轉(zhuǎn)時(shí),默認(rèn)是以盒子的正中心為坐標(biāo)原點(diǎn)的。如果想改變旋轉(zhuǎn)的坐標(biāo)原點(diǎn),可以用transform-origin屬性。格式如下:
transform-origin: 水平坐標(biāo) 垂直坐標(biāo); transform-origin: 50px 50px; transform-origin: center bottom; //旋轉(zhuǎn)時(shí),以盒子底部的中心為坐標(biāo)原點(diǎn)
我們來(lái)看一下 rotate 結(jié)合 transform-origin 的用法舉例。
代碼如下:
效果如下:
4、傾斜
3D 轉(zhuǎn)換
1、旋轉(zhuǎn):rotateX、rotateY、rotateZ
3D坐標(biāo)系(左手坐標(biāo)系)
如上圖所示,伸出左手,讓拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。拇指、食指和中指分別代表X、Y、Z軸的正方向,這樣我們就建立了一個(gè)左手坐標(biāo)系。
瀏覽器的這個(gè)平面,是X軸、Y軸;垂直于瀏覽器的平面,是Z軸。
旋轉(zhuǎn)的方向:(左手法則)
左手握住旋轉(zhuǎn)軸,豎起拇指指向旋轉(zhuǎn)軸的正方向,正向就是其余手指卷曲的方向。
從上面這句話,我們也能看出:所有的3d旋轉(zhuǎn),對(duì)著正方向去看,都是順時(shí)針旋轉(zhuǎn)。
格式:
transform: rotateX(360deg); //繞 X 軸旋轉(zhuǎn)360度 transform: rotateY(360deg); //繞 Y 軸旋轉(zhuǎn)360度 transform: rotateZ(360deg); //繞 Z 軸旋轉(zhuǎn)360度
格式舉例:
(1)rotateX 舉例
效果:
上方代碼中,我們最好加個(gè)透視的屬性,方能看到3D的效果;沒(méi)有這個(gè)屬性的話,圖片旋轉(zhuǎn)的時(shí)候,像是壓癟了一樣。
而且,透視的是要加給圖片的父元素 div,方能生效。我們?cè)诤竺鏁?huì)講解透視屬性。
(2)rotateY 舉例:
效果:
(3)rotateZ 舉例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .rotateZ { width: 330px; height: 227px; margin: 100px auto; /* 透視*/ perspective: 200px; } img { transition: all 1s; } .rotateZ:hover img { transform: rotateZ(360deg); } </style> </head> <body> <div class="rotateZ"> <img src="images/z.jpg" alt=""/> </div> </body> </html>
效果:
案例:百度錢包
現(xiàn)在有下面這張圖片素材:
要求做成下面這種效果:
上面這張圖片素材其實(shí)用的是精靈圖。實(shí)現(xiàn)的代碼如下:
2、移動(dòng):translateX、translateY、translateZ
格式:
transform: translateX(100px); //沿著 X 軸移動(dòng) transform: translateY(360px); //沿著 Y 軸移動(dòng) transform: translateZ(360px); //沿著 Z 軸移動(dòng)
格式舉例:
(1)translateX 舉例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 200px; height: 200px; background: green; transition: all 1s; } .box:hover { transform: translateX(100px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果:
(2)translateY 舉例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 200px; height: 200px; background: green; transition: all 1s; } .box:hover { transform: translateY(100px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果:
(3)translateZ 舉例:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { /* 給box的父元素加透視效果*/ perspective: 1000px; } .box { width: 250px; height: 250px; background: green; transition: all 1s; margin: 200px auto } .box:hover { /* translateZ必須配合透視來(lái)使用*/ transform: translateZ(400px); } </style> </head> <body> <div class="box"> </div> </body> </html>
效果:
上方代碼中,如果不加透視屬性,是看不到translateZ的效果的。
3、透視:perspective
電腦顯示屏是一個(gè) 2D 平面,圖像之所以具有立體感(3D效果),其實(shí)只是一種視覺(jué)呈現(xiàn),通過(guò)透視可以實(shí)現(xiàn)此目的。
透視可以將一個(gè)2D平面,在轉(zhuǎn)換的過(guò)程當(dāng)中,呈現(xiàn)3D效果。但僅僅只是視覺(jué)呈現(xiàn)出3d 效果,并不是正真的3d。
格式有兩種寫法:
4、3D呈現(xiàn)(transform-style)
3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的,可以給這些元素的父元素設(shè)置transform-style: preserve-3d來(lái)使其變成一個(gè)真正的3D圖形。屬性值可以如下:
transform-style: preserve-3d; //讓 子盒子 位于三維空間里 transform-style: flat; //讓子盒子位于此元素所在的平面內(nèi)(子盒子被扁平化)
案例:立方體
動(dòng)畫是CSS3中具有顛覆性的特征,可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn) 來(lái)精確控制一個(gè)或一組動(dòng)畫,常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。
1、定義動(dòng)畫的步驟
(1)通過(guò)@keyframes定義動(dòng)畫;
(2)將這段動(dòng)畫通過(guò)百分比,分割成多個(gè)節(jié)點(diǎn);然后各節(jié)點(diǎn)中分別定義各屬性;
(3)在指定元素里,通過(guò) animation 屬性調(diào)用動(dòng)畫。
之前,我們?cè)?js 中定義一個(gè)函數(shù)的時(shí)候,是先定義,再調(diào)用:
js 定義函數(shù): function fun(){ 函數(shù)體 } 調(diào)用: fun();
同樣,我們?cè)?CSS3 中定義動(dòng)畫的時(shí)候,也是先定義,再調(diào)用:
定義動(dòng)畫: @keyframes 動(dòng)畫名{ from{ 初始狀態(tài) } to{ 結(jié)束狀態(tài) } } 調(diào)用: animation: 動(dòng)畫名稱 持續(xù)時(shí)間;
其中,animation屬性的格式如下:
animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次) animation: move1 1s alternate linear 3; animation: move2 4s;
定義動(dòng)畫的格式舉例:
注意好好看代碼中的注釋。
效果如下:
2、動(dòng)畫屬性
我們剛剛在調(diào)用動(dòng)畫時(shí),animation屬性的格式如下:
animation屬性的格式如下:
animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次) animation: move1 1s alternate linear 3; animation: move2 4s;
可以看出,這里的 animation 是綜合屬性,接下來(lái),我們把這個(gè)綜合屬性拆分看看。
(1)動(dòng)畫名稱:
animation-name: move;
(2)執(zhí)行一次動(dòng)畫的持續(xù)時(shí)間:
animation-duration: 4s;
備注:上面兩個(gè)屬性,是必選項(xiàng),且順序固定。
(3)動(dòng)畫的執(zhí)行次數(shù):
animation-iteration-count: 1; //iteration的含義表示迭代
屬性值infinite表示無(wú)數(shù)次。
(3)動(dòng)畫的方向:
animation-direction: alternate;
屬性值:normal 正常,alternate 反向。
(4)動(dòng)畫延遲執(zhí)行:
animation-delay: 1s;
(5)設(shè)置動(dòng)畫結(jié)束時(shí),盒子的狀態(tài):
animation-fill-mode: forwards;
屬性值: forwards:保持動(dòng)畫結(jié)束后的狀態(tài)(默認(rèn)), backwards:動(dòng)畫結(jié)束后回到最初的狀態(tài)。
(6)運(yùn)動(dòng)曲線:
animation-timing-function: ease-in;
屬性值可以是:linear ease-in-out steps()等。
注意,如果把屬性值寫成steps(),則表示動(dòng)畫不是連續(xù)執(zhí)行,而是間斷地分成幾步執(zhí)行。我們接下來(lái)專門講一下屬性值 steps()。
steps()的效果
我們還是拿上面的例子來(lái)舉例,如果在調(diào)用動(dòng)畫時(shí),我們寫成:
animation: move2 4s steps(2);
效果如下:
有了屬性值 steps(),我們就可以作出很多不連續(xù)地動(dòng)畫效果。比如時(shí)鐘;再比如,通過(guò)多張靜態(tài)的魚,作出一張游動(dòng)的魚。
step()舉例:時(shí)鐘的簡(jiǎn)易模型
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 3px; height: 200px; background-color: #000; margin: 100px auto; transform-origin: center bottom; /* 旋轉(zhuǎn)的中心點(diǎn)是底部 */ animation: myClock 60s steps(60) infinite; } @keyframes myClock { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body> <div></div> </body> </html>
上方代碼,我們通過(guò)一個(gè)黑色的長(zhǎng)條div,旋轉(zhuǎn)360度,耗時(shí)60s,分成60步完成。即可實(shí)現(xiàn)。
效果如下:
動(dòng)畫舉例:擺動(dòng)的魚
現(xiàn)在,我們要做下面這種效果,為了作出上面這種效果,要分成兩步。
(1)第一步:讓魚在原地?cái)[動(dòng)
魚在原地?cái)[動(dòng)并不是一張 gif動(dòng)圖,她其實(shí)是由很多張靜態(tài)圖間隔地播放,一秒鐘播放完畢,就可以了
圖片的url是http://img.smyhvae.com/20180209_1245.gif,圖片較大,如無(wú)法觀看,可在瀏覽器中單獨(dú)打開(kāi)。
上面這張大圖的尺寸是:寬 509 px、高 2160 px。
我們可以理解成,每一幀的尺寸是:寬 509 px、高 270 px。270 * 8 = 2160。讓上面這張大圖,在一秒內(nèi)從 0px 的位置往上移動(dòng)2160px,分成8步來(lái)移動(dòng)。就可以實(shí)現(xiàn)了。
代碼是:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .shark { width: 509px; height: 270px; /*盒子的寬高是一幀的寬高*/ border: 1px solid #000; margin: 100px auto; background: url(images/shark.png) left top; /* 讓圖片一開(kāi)始位于 0 px的位置 */ animation: sharkRun 1s steps(8) infinite; /* 一秒之內(nèi),從頂部移動(dòng)到底部,分八幀, */ } @keyframes sharkRun { 0% { } /* 270 * 8 = 2160 */ 100% { background-position: left -2160px; /* 動(dòng)畫結(jié)束時(shí),讓圖片位于最底部 */ } } </style> </head> <body> <div class="sharkBox"> <div class="shark"></div> </div> </div> </body> </html>
我們不妨把上面的動(dòng)畫的持續(xù)時(shí)間從1s改成 8s,就可以看到動(dòng)畫的慢鏡頭
這下,你應(yīng)該恍然大悟了。
(2)第二步:讓魚所在的盒子向前移動(dòng)。
實(shí)現(xiàn)的原理也很簡(jiǎn)單,我們?cè)谏弦徊街幸呀?jīng)讓shark這個(gè)盒子實(shí)現(xiàn)了原地?fù)u擺,現(xiàn)在,讓 shark 所在的父盒子 sharkBox向前移動(dòng),即可。完整版代碼是:
最后效果很好
這是我在學(xué)習(xí)CSS3動(dòng)畫的時(shí)候收藏的一篇好文,現(xiàn)在分享在這里,既方便大家學(xué)習(xí)參考,也方便日后查閱,最后感謝作者
鏈接文章
https://www.cnblogs.com/qianguyihao/p/8435182.html
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。