html 图片飞入,CSS3 苹果手机UI界面展示图片飞入动画特效源码

原标题：CSS3 苹果手机UI界面展示图片飞入动画特效源码

效果图

各位朋友，大家下午好！

今天给大家带来的是 CSS3 苹果手机UI图片飞入动画特效源码！

是不是很炫酷，特适合一些APP的官网展示！

由于源码比较长，需要的朋友可以私聊小编哦！

废话不多说，上源码！

CSS3 transform图片飞入动画特效

*{

margin: 0;

}

body{

background: #ff5046;

overflow: hidden;

}

#box{

position: relative;

width: 960px;

height: 420px;

margin:200px auto 0;

}

#box img{

position: absolute;

}

#box img:nth-child(1){

/*left:-8px;*/

top:113px;

left:-1000px;

}

#box img:nth-child(1).on{

left:-8px;

transition: 0.5s 1s;

}

#box img:nth-child(2){

/*left:163px;*/

top:84px;

left:-1000px;

}

#box img:nth-child(2).on{

left:163px;

transition: 0.5s 0.5s;

}

#box img:nth-child(3){

left:310px;

top:0px;

animation: shake 0.8s linear;

}

@keyframes shake {

0%{

transform: scale(0);

}

30%{

transform: scale(1.2);

}

40%{

transform: scale(0.8);

}

50%{

transform: scale(1.15);

}

60%{

transform: scale(0.9);

}

70%{

transform: scale(1.1);

}

80%{

transform: scale(0.95);

}

90%{

transform: scale(1.05);

}

100%{

transform: scale(1);

}

}

#box img:nth-child(4){

/*left:510px;*/

top:21px;

left:1500px;

}

#box img:nth-child(4).on{

left:510px;

transition: 0.5s 0.5s;

}

#box img:nth-child(5){

/*left:656px;*/

top:0px;

left:1500px;

}

#box img:nth-child(5).on{

left:656px;

transition: 0.5s 1s;

}

<>

var box = document.getElementById("box");

var aImgs= box.getElementsByTagName("img");

window. = function(){

for(var i=0;i

aImgs[i].className="on";

}

}

>

适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

su

< Language=VB>