分類  >  Web前端 >

相仿心跳的banner動畫

tags:    時間:2013-12-09 23:26:37
類似心跳的banner動畫

 

   本文收錄一個來自alipay活動頁的動畫:

 

   核心代碼:

 

 

@keyframes scale {    0% {        transform: scale(1);    }   1% {        transform: scale(1.15);   }   2% {        transform: scale(1);   }   100% {        transform: scale(1);   } }   @-webkit-keyframes scale {    0% {        -webkit-transform: scale(1);    }   1% {        -webkit-transform: scale(1.15);   }   2% {        -webkit-transform: scale(1);   }   100% {        -webkit-transform: scale(1);   } }   @-moz-keyframes scale {    0% {        -moz-transform: scale(1);    }   1% {        -moz-transform: scale(1.15);   }   2% {        -moz-transform: scale(1);   }   100% {        -moz-transform: scale(1);   } }

 

 

.scale {    transform: scale(1);    -webkit-transform: scale(1);    animation: scale 5s linear 0s infinite;    -moz-animation: scale 5s linear 0s infinite;    -webkit-animation: scale 5s linear 0s infinite; }

 

 

    具體事例:

     http://jsfiddle.net/zhangyaochun/8sjs5/

 

 

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網