css3 simply implements icon animation to display one by one from small to large_html/css_WEB-ITnose

When making a website, animation effects are often used to prevent the pictures from being too bland: jumping from small to large. This effect is very visually impactful and significantly increases attention~

Principle: Use the animation attribute @keyframes@-moz-keyframes@-webkit-keyframes of css3 to define the animation suofang, and then use animation to call suofang. An animation frame and add the animation to the picture. It should be noted that the picture needs to be given a processing equivalent to initialization

transform:scale(0);    -moz-transform:scale(0);    -webkit-transform:scale(0);

Finally in js Call css animation. For different pages, you need to use index to mark different pages.

 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"  class="mdmobile-second-one-middle-top-left"/>12                     <img src="images/07_05.png"   class="mdmobile-second-one-middle-top-right"/>13                     <div class="clear"></div>14                 </div>15                 <div class="mdmobile-second-one-middle-middle">16                     <img src="images/07_09.png"  class="mdmobile-second-one-middle-middle-one"/>17                     <img src="images/07_11.png"   class="mdmobile-second-one-middle-middle-two"/>18                     <img src="images/07_13.png"  class="mdmobile-second-one-middle-middle-three"/>19                     <div class="clear"></div>20                 </div>21 　　　　　　　　　　<div class="mdmobile-second-one-middle-foot">22                     <img src="images/07_16.png"  class="mdmobile-second-one-middle-foot-left"/>23                     <img src="images/07_18.png"  class="mdmobile-second-one-middle-foot-right"/>24                     <div class="clear"></div>25                 </div>26             </div>27             <div class="mdmobile-second-one-foot">28             </div>29         </div>30     </div>31     <!--第二屏结束-->

 1 /*第二屏开始*/ 2  3 @keyframes  suofang { 4     0% {transform:scale(0.2);} 5     100% {transform:scale(1.0);} 6 } 7 @-moz-keyframes  suofang { 8     0% {-moz-transform:scale(0.2);} 9     100% {-moz-transform:scale(1.0);}10 }11 @-webkit-keyframes  suofang {12     0% {-webkit-transform:scale(0.2);}13     100% {-webkit-transform:scale(1.0);}14 }15 .mdmobile-second-one-middle-top-right.active,16 .mdmobile-second-one-middle-top-left.active,17 .mdmobile-second-one-middle-middle-one.active,18 .mdmobile-second-one-middle-middle-two.active,19 .mdmobile-second-one-middle-middle-three.active,20 .mdmobile-second-one-middle-foot-left.active,21 .mdmobile-second-one-middle-foot-right.active22 {23     animation: suofang 1s forwards;24     -moz-animation: suofang 1s forwards;25     -webkit-animation: suofang 1s forwards;26 }27 .mdmobile-second-one-middle-top-right,28 .mdmobile-second-one-middle-top-left,29 .mdmobile-second-one-middle-middle-one,30 .mdmobile-second-one-middle-middle-two,31 .mdmobile-second-one-middle-middle-three,32 .mdmobile-second-one-middle-foot-left,33 .mdmobile-second-one-middle-foot-right34 {35     transform:scale(0);36     -moz-transform:scale(0);37     -webkit-transform:scale(0);38 }

if(index == 2){                $(".mdmobile-second-one-middle-top-left").addClass("active");                setTimeout(function(){                    $(".mdmobile-second-one-middle-top-right").addClass("active");                },100);                setTimeout(function(){                    $(".mdmobile-second-one-middle-middle-one").addClass("active");                },200);                setTimeout(function(){                    $(".mdmobile-second-one-middle-middle-two").addClass("active");                },300);                setTimeout(function(){                    $(".mdmobile-second-one-middle-middle-three").addClass("active");                },400);                setTimeout(function(){                    $(".mdmobile-second-one-middle-foot-left").addClass("active");                },500);                setTimeout(function(){                    $(".mdmobile-second-one-middle-foot-right").addClass("active");                },600);            }