首页 建站教程 WEB前端 正文

制作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...

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动画效果,通过巧妙地运用它们,你可以打造出各种令人惊叹的交互和视觉效果。

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:https://www.umtheme.com/web/213.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 161
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的CSS3效果,有需要的可以直接引用:1.悬浮时放大:...
WEB前端 2023.09.13 0 119
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持