本文主要是介绍CSS3-购物车飞入动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
购物车飞入动画：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.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}</style>
</head>
<body>
<div class="con"><div class="che"></div><div class="cont"><div class="wu1"></div><div class="wu2"></div><div class="wu3"></div><div class="wu4"></div></div>
</div></body>
<html>
运行结果:
这篇关于CSS3-购物车飞入动画的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
