CSS3动画网页跳跃特效

SongKer 发布时间:2015-08-13 分类:Web 阅读:2803次 添加评论

CSS3动画网页跳跃特效。

<style>@keyframes jump { 
    0% {top:100;}
    20% {top:-90;}
    40% {top:50;}
    60% {top:-30;}
    80% {top: 20;}
    90% {top: -10;}
    100% {top:0;}
} 
@-webkit-keyframes jump {/*针对webkit内核*/ 
    0% {top:100;}
    20% {top:-100;}
    40% {top:50;}
    60% {top:-30;}
    80% {top: 20;}
    90% {top: -10;}
    100% {top:0;}
} 
@-moz-keyframes jump /* Firefox */{
    0% {top:100;}
    20% {top:-100;}
    40% {top:50;}
    60% {top:-30;}
    80% {top: 20;}
    90% {top: -10;}
    100% {top:0;}
}
body{   
    position:relative;
    animation: jump;/*动画名称*/ 
    animation-duration: 2s;/*动画持续时间*/ 
    -webkit-animation:jump 2s;/*针对webkit内核*/ 

    -moz-animation:jump 2s;
}</style>


关键字词: css3动画网页跳跃

暂无留言

发表评论:

◎欢迎您的参与讨论。