站长资源
中国站长网站

制作h5常用的css3动画效果

一些常用的h5效果,自己总结的,用的时候直接拿,方便快捷!

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 {<br>          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 {<br>          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动画效果

评论 抢沙发

评论前必须登录!