1、既然是在网页上实现的效果,那么网页的架爿瑰鲚母构必然是要先完成的,小编的架构就是两个div,里面包含着五个图片(引用图片时记得路径正确),页面效果如图二;
2、添加一下基本的 css 样式,width 和 height 控制宽度和高度,margin 这个属性控制 div 移动到页面中间;
3、然后我们看一下 transform:scale()的效果,如图二,可以看到施加烂瘀佐栾这个属性的图片变大,变大的比例是 scale() 括号中的数值控制的;
4、然后我们看一下 transform:rotate()这个效果,施加这个属性的可以旋转,正值是顺时针旋转,负值是逆时针旋转;
5、我们看一下两个属性一起用控制缩小的效果( scale(0.1)有点小看不清,图二不是0.1倍的效果)
6、之后就是动态的关键属性 transition 这个属性,酋篚靶高需要提前设置在选择其中;然后效果就实现了(图二无法做出动图,所以大家将就看看,样式源码是图三)