基于JS實現(xiàn)動態(tài)跟隨特效的示例代碼

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

演示

技術(shù)棧

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

CSS3中添加的新屬性animation是用來為元素實現(xiàn)動畫效果的，但是animation無法單獨擔當起實現(xiàn)動畫的效果。承載動畫的另一個屬性@keyframes。使用的時候為了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前綴以適應不同的瀏覽器。

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

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

@keyframes定義一個動畫，并定義具體的動畫效果，比如是放大還是位移等等。

@keyframes它定義的動畫并不直接執(zhí)行，需要借助animation來運轉(zhuǎn)。

在動畫過程中，您能夠多次改變這套CSS樣式。

以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞from和to，等價于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':'