CSS3图片飞入动画特效
CSS3图片飞入动画特效
附件有完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>CSS3仿唱吧图片飞入动画特效</title>
<style>
*{
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;
}
</style>
</head>
<body>
<div id="box">
<img src="94zc.com/img/top1.png">
<img src="94zc.com/img/top2.png">
<img src="94zc.com/img/top3.png">
<img src="94zc.com/img/top4.png">
<img src="94zc.com/img/top5.png">
</div>
<script>
var box = document.getElementById("box");
var aImgs= box.getElementsByTagName("img");
window.onload = function(){
for(var i=0;i<aImgs.length;i++){
aImgs[i].className="on";
}
}
</script>
</body>
</html>
本文手机访问二维码
- 代安装好 ：30元/次
- 换logo公司信息 ：180元/次
- 添加资料 ：200元/次(信息量不超过400条)
- 仿站 ：企业站600起,复杂站1200起,商城2000起
- 定制 ：具体费用请咨询客服
- 如有需要请联系客服
- 服务器58元起 查看更多
- 400电话网站模板,全套带后台的400电话网站
- 影视文化传媒短视频制作公司企业宣传片网站源码模板
- 专业资源回收|建筑拆除网站科技公司模板
- 中英双语多语言外贸网站模板,程序完整有后台新材料化工原料公司网站
- 传媒网站源码广告(公关活动策划网站模板带后台完整免费使用)
- 胎盘粉制作网站源码紫河车网站源码完整后台
- 【双语多语】红外设备公司网站源码电子设备电子厂官网全站带数据后台模板免费下载
- 钢板租赁网站模板钢板租赁建筑工程机械租赁有限公司网站免费下源码
- 外卖订单打印模板html版本H5版本,用于仓库出货打印
- 策划网站模板会展服务网站模板品牌策划与创造力的公关活动网站源码带后台
- 电动车网站模板电动汽车老年代步车网站销售源码模板
- 自适应网站文化培训学校少儿培训培优网站企业整站模板源码
- 金融公司网站模板商业承兑、电子商业承兑、承兑及电子承兑业务网站源码
- （带手机版数据同步）防水卷材建材类织梦模板建筑公司网站
- 铜铝制品网站模板,铜门窗网站源码完整后台别墅门窗网站模板
