开发工具与关键技术: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动画效果就完成了。
下面为效果图: