html添加到购物车飞入动画效果,CSS3-购物车飞入动画



购物车飞入动画：

.con{

width: 1000px;

height: 700px;

border: 1px solid transparent;

position:relative;

}

.che{

width: 200px;

height:200px;

background-image: url("img/c.jpg");

background-repeat: no-repeat;

margin-top: 100px;

margin-right: 100px;

position: absolute;

right: 0px;

top: 0px;

}

.cont{

height: 280px;

margin-top: 50%;

}

.wu1{

width: 200px;

height: 250px;

margin: 10px;

background-image: url("img/10.png");

background-repeat: no-repeat;

-webkit-transition: all 1s;

float: left;

}

.wu1:active{

transform: translate(350%,-180%) scale(0.3);

opacity:0

}

.wu2{

width: 200px;

height: 250px;

margin: 10px;

background-image: url("img/12.png");

background-repeat: no-repeat;

-webkit-transition: all 1s;

float: left;

}

.wu2:active{

transform: translate(250%,-180%) scale(0.3);

opacity:0

}

.wu3{

width: 200px;

height: 250px;

margin: 10px;

background-image: url("img/13.png");

background-repeat: no-repeat;

-webkit-transition: all 1s;

float: left;

}

.wu3:active{

transform: translate(140%,-180%) scale(0.3);

opacity:0

}

.wu4{

width: 200px;

height: 250px;

margin: 10px;

background-image: url("img/13.png");

background-repeat: no-repeat;

-webkit-transition: all 1s;

float: left;

}

.wu4:active{

transform: translate(30%,-180%) scale(0.3);

opacity:0

}

运行结果: