制作h5常用的css3动画效果

css3提供了许多强大的特效，可以用来实现各种各样的效果，下面是我总结的一些常用的css3效果，有需要的可以直接引用：

1.悬浮时放大：

.one{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out;-moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.one:hover{transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1); cursor:pointer;}

2.悬浮时转一圈：

.two{transition:All 0.4s ease-in-out;-webkit-transition:All 0.4s ease-in-out; -moz-transition:All 0.4s ease-in-out;-o-transition:All 0.4s ease-in-out;}
.two:hover{transform:rotate(360deg); -webkit-transform:rotate(360deg);-moz-transform:rotate(360deg); -o-transform:rotate(360deg); -ms-transform:rotate(360deg) ; cursor:pointer;}

3.自动不停转圈

.three{animation:mymove linear 30s infinite;-webkit-animation:mymove linear 30s infinite;}
@keyframes mymove
{
    from {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
    }
}
  
@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
    }
    to {
　　　　　transform:rotate(360deg);
    　　-webkit-transform:rotate(360deg);
    　　-moz-transform:rotate(360deg);
    　　-o-transform:rotate(360deg);
    　　-ms-transform:rotate(360deg);
　　　　}
}

4.自动颜色越来越浅

.four{animation:mymove linear 5s infinite;-webkit-animation:mymove linear 5s infinite; /*Safari and Chrome*/}
 
@keyframes mymove
{
    from {opacity:1;
        filter:Alpha(opacity=100);
        transform:scale(1);
        -webkit-transform:scale(1);
        -moz-transform:scale(1);
        -o-transform:scale(1);
        -ms-transform:scale(1);}
    to {opacity:0.1;
        filter:Alpha(opacity=10);
        transform:scale(1.1);
        -webkit-transform:scale(1.1);
        -moz-transform:scale(1.1);
        -o-transform:scale(1.1);
        -ms-transform:scale(1.1);}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
    from {
        opacity:1;
    　　filter:Alpha(opacity=100);
    　　transform:scale(1);
    　　-webkit-transform:scale(1);
    　　-moz-transform:scale(1);
    　　-o-transform:scale(1);
    　　-ms-transform:scale(1);
     }
    to {
       opacity:0.1;
    　　filter:Alpha(opacity=10);
    　　transform:scale(1.1);
    　　-webkit-transform:scale(1.1);
    　　-moz-transform:scale(1.1);
    　　-o-transform:scale(1.1);
    　　-ms-transform:scale(1.1);
    }
}

这些只是制作h5常用的css3动画效果，通过巧妙地运用它们，你可以打造出各种令人惊叹的交互和视觉效果。