简单的css3动画效果

开发工具与关键技术：html+css3
作者： 李伙
撰写时间： 2019年2月2日

css3中的transition可以实现一些简单的动画效果，可以让我们的页面布局更加完美；下面是一个小小的例子；
首先设置一个div，在里面存放图片

<div class="container">
			<img src="../img/mm4.jpg" alt="">
			<img src="../img/mm8.jpg" alt="">
			<img src="../img/mm1.jpg" alt="">
			<img src="../img/mm2.jpg" alt="">
			<img src="../img/mm3.jpg" alt="">
			<img src="../img/mm5.jpg" alt="">
			<img src="../img/mm4.jpg" alt="">
			<img src="../img/mm7.jpg" alt="">
			<img src="../img/mm6.jpg" alt="">
		</div>

然后再设置好div和图片的样式

   .container{
		width: 300px;
		height: 200px;
		margin-top: 200px;margin-left: 300px;
		position: relative;
	}
	.container img{
		width: 280px;
		height: 180px;
		border: 1px solid #eee;
		background: #fff;
		padding: 10px;
		position: absolute;
		transition: all .5s;
	}

再给图片添加伪类，让鼠标移动到最外面的div上触发图片上transition属性，然后图片就会展开，在展开过程中就会有相应的动画效果。

	transform: translate(-60%,-85%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(2){
		transform: translate(21%,-107%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(3){
		transform: translate(102%,-129%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(4){
		transform: translate(-50%,-3%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(5){
		transform: translate(112%,-47%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(6){
		transform: translate(-40%,79%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(7){
		transform: translate(41%,57%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(8){
		transform: translate(122%,35%) rotate(-10deg) scale(0.8);
	}
	.container:hover img:nth-child(9){
		transform: translate(30%,-25%) rotate(-10deg) scale(1.1);
	}

这样一个简单的transition动画效果就完成了。
下面为效果图：

简单的css3动画效果