CSS3 实现弹跳的小球动画纯CSS3制作的圆形修边渐变按钮动画特效源码css实现鼠标放上去时图片过渡转换动画效果纯CSS3实现的文件夹悬停打开动画特效源码CSS3文字图标组合悬停UI动画特效源码基于css3制作秋天落叶主题动画特效代码

 #wrap{ position:absolute; left:0; right:0; top:0; bottom:0; width:580px; height:143px; margin:auto; } #wrap img{ width:160px; } #wrap div{ float:left; margin-right:50px;} #wrap div:last-child{ margin-right:0;} .tu1,.tu2,.tu3{ position:absolute; left:50%; margin-left:-80px; } .tu1{ z-index:1; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,leftMove 0.4s ease-out 1.2s 1 forwards,rotate 1s linear 1.6s infinite; } .tu2{ z-index:2; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,middle 0.4s ease-out 1.2s 1 forwards; } .tu3{ z-index:3; animation:tiantiao1 0.5s ease-in 1 forwards,tiantiao2 0.2s ease-out 0.5s 1 forwards,tiantiao3 0.2s ease-in 0.7s 1 forwards,tiantiao4 0.15s ease-out 0.9s 1 forwards,tiantiao5 0.15s ease-in 1.05s 1 forwards,rightMove 0.4s ease-out 1.2s 1 forwards; } @keyframes tiantiao1{ 0%{ transform:translateY(-500px); } 100%{ transform:translateY(0);} } @keyframes tiantiao2{ 0%{ transform:translateY(0);} 100%{ transform:translateY(-100px);}} @keyframes tiantiao3{ 0%{ transform:translateY(-100px);} 100%{ transform:translateY(0);}} @keyframes tiantiao4{ 0%{ transform:translateY(0px);} 100%{ transform:translateY(-50px);}} @keyframes tiantiao5{ 0%{ transform:translateY(-50px);} 100%{ transform:translateY(0);} } @keyframes leftMove{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-300px) scale(1.6); }} @keyframes rightMove{ 0%{ transform:translateX(0);} 100%{ transform:translateX(300px) scale(1.6); }} @keyframes middle{ 0%{ transform:translateX(0); } 100%{ transform:translateX(0) scale(1.6); }}