在制作网站时避免图片太平淡经常会用到动画效果:由小到大跳跃出现。这种效果很有视觉冲击力,显著提高关注度~
原理:利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧,并将动画添加到图片上,需要注意的是需要给图片相当于初始化的一个处理
transform:scale(0); -moz-transform:scale(0); -webkit-transform:scale(0);
最后在js中调用css动画。对于不同的页面,需要使用index来标注不同的页面。
1 <!--第二屏开始--> 2 <div class="section"> 3 <div class="mdmobile-second-one"> 4 <div class="mdmobile-second-one-top"> 5 <img src="images/06_03.png" class="mdmobile-second-one-top-top"/> 6 <img src="images/06_07.png" class="mdmobile-second-one-top-foot"/> 7 </div> 8 9 <div class="mdmobile-second-one-middle"> 10 <div class="mdmobile-second-one-middle-top"> 11 <img src="images/07_03.png