第基于JS實(shí)現(xiàn)動(dòng)態(tài)跟隨特效的示例代碼目錄演示技術(shù)棧源碼css部分js部分

演示

技術(shù)棧

這次用到了關(guān)于css的一些功能，和jQuery。

CSS3中添加的新屬性animation是用來(lái)為元素實(shí)現(xiàn)動(dòng)畫(huà)效果的，但是animation無(wú)法單獨(dú)擔(dān)當(dāng)起實(shí)現(xiàn)動(dòng)畫(huà)的效果。承載動(dòng)畫(huà)的另一個(gè)屬性@keyframes。使用的時(shí)候?yàn)榱思嫒菘杉由?webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應(yīng)不同的瀏覽器。

創(chuàng)建動(dòng)畫(huà)的原理是，將一套CSS樣式逐漸變化為另一套樣式。

通過(guò)@keyframes規(guī)則，您能夠創(chuàng)建動(dòng)畫(huà)。

@keyframes定義一個(gè)動(dòng)畫(huà)，并定義具體的動(dòng)畫(huà)效果，比如是放大還是位移等等。

@keyframes它定義的動(dòng)畫(huà)并不直接執(zhí)行，需要借助animation來(lái)運(yùn)轉(zhuǎn)。

在動(dòng)畫(huà)過(guò)程中，您能夠多次改變這套CSS樣式。

以百分比來(lái)規(guī)定改變發(fā)生的時(shí)間，或者通過(guò)關(guān)鍵詞from和to，等價(jià)于0%和100%。

源碼

css部分

.container{

text-align:center;

perspective:500px;

-webkit-perspective:500px;

border:1pxsolid;

.example{

display:table-cell;

vertical-align:middle;

color:#fff;

width:150px;

height:150px;

background:url(../images/01.jpg)no-repeat;

@-webkit-keyframestopenter{

from{

-webkit-transform-origin:top;

-webkit-transform:rotateX(-90deg);

to{

-webkit-transform-origin:top;

-webkit-transform:rotateX(0deg);

@keyframestopenter{

from{

transform-origin:top;

transform:rotateX(-90deg);

to{

transform-origin:top;

transform:rotateX(0deg);

@-webkit-keyframestopleave{

from{

-webkit-transform-origin:top;

-webkit-transform:rotateX(0deg);

to{

-webkit-transform-origin:top;

-webkit-transform:rotateX(-90deg);

@keyframestopleave{

from{

transform-origin:top;

transform:rotateX(0deg);

to{

transform-origin:top;

transform:rotateX(-90deg);

@-webkit-keyframesbottomenter{

from{

-webkit-transform-origin:bottom;

-webkit-transform:rotateX(90deg);

to{

-webkit-transform-origin:bottom;

-webkit-transform:rotateX(0deg);

@keyframesbottomenter{

from{

transform-origin:bottom;

transform:rotateX(90deg);

to{

transform-origin:bottom;

transform:rotateX(0deg);

@-webkit-keyframesbottomleave{

from{

-webkit-transform-origin:bottom;

-webkit-transform:rotateX(0deg);

to{

-webkit-transform-origin:bottom;

-webkit-transform:rotateX(90deg);

@keyframesbottomleave{

from{

transform-origin:bottom;

transform:rotateX(0deg);

to{

transform-origin:bottom;

transform:rotateX(90deg);

@-webkit-keyframesleftenter{

from{

-webkit-transform-origin:left;

-webkit-transform:rotateY(90deg);

to{

-webkit-transform-origin:left;

-webkit-transform:rotateY(0deg);

@keyframesleftenter{

from{

transform-origin:left;

transform:rotateY(90deg);

to{

transform-origin:left;

transform:rotateY(0deg);

@-webkit-keyframesleftleave{

from{

-webkit-transform-origin:left;

-webkit-transform:rotateY(0deg);

to{

-webkit-transform-origin:left;

-webkit-transform:rotateY(90deg);

@keyframesleftleave{

from{

transform-origin:left;

transform:rotateY(0deg);

to{

transform-origin:left;

transform:rotateY(90deg);

@-webkit-keyframesrightenter{

from{

-webkit-transform-origin:right;

-webkit-transform:rotateY(-90deg);

to{

-webkit-transform-origin:right;

-webkit-transform:rotateY(0deg);

@keyframesrightenter{

from{

transform-origin:right;

transform:rotateY(-90deg);

to{

transform-origin:right;

transform:rotateY(0deg);

@-webkit-keyframesrightleave{

from{

-webkit-transform-origin:right;

-webkit-transform:rotateY(0deg);

to{

-webkit-transform-origin:right;

-webkit-transform:rotateY(-90deg);

@keyframesrightleave{

from{

transform-origin:right;

transform:rotateY(0deg);

to{

transform-origin:right;

transform:rotateY(-90deg);

}

js部分

$(function(){

//initialize

$('.container').css({

'perspective-origin':'50%0%',

'-webkit-perspective-origin':'50%0%'

$('.container.example').css({

'animation':'topleave400msforwards',

'-webkit-animation':'topleave400msforwards'

$('.container').bind('mouseentermouseleave',function(e){

vardir=getDirection($(this),e),

enter=e.type==='mouseenter',

topPerspectiveOrigin={

'perspective-origin':'50%0%',

'-webkit-perspective-origin':'50%0%'

rightPerspectiveOrigin={

'perspective-origin':'100%50%',

'-webkit-perspective-origin':'100%50%'

bottomPerspectiveOrigin={

'perspective-origin':'50%100%',

'-webkit-perspective-origin':'50%100%'

leftPerspectiveOrigin={

'perspective-origin':'0%50%',

'-webkit-perspective-origin':'0%50%'

$target=$(this).find('.example');

switch(dir){

case0:

if(enter){

$(this).css(topPerspectiveOrigin);

$target.css({

'animation':'topenter400msforwards',

'-webkit-animation':'topenter400msforwards'

}else{

$(this).css(topPerspectiveOrigin);

$target.css({

'animation':'topleave400msforwards',

'-webkit-animation':'topleave400msforwards'

break;

case1:

if(enter){

$(this).css(rightPerspectiveOrigin);

$target.css({

'animation':'rightenter400msforwards',

'-webkit-animation':'rightenter400msforwards'

}else{

$(this).css(rightPerspectiveOrigin);

$target.css({

'animation':'rightleave400msforwards',

'-webkit-animation':'rightleave400msforwards'

break;

case2:

if(enter){

$(this).css(bottomPerspectiveOrigin);

$target.css({

'animation':'bottomenter400msforwards',

'-webkit-animation':'bottomenter400msforwards'

}else{

$(this).css(bottomPerspectiveOrigin);

$target.css({

'animation':'bottomleave400msforwards',

'-webkit-animation':'bottomleave400msforwards'

break;

case3:

if(enter){

$(this).css(leftPerspectiveOrigin);

$target.css({

'animation':'