• 技术文章 >web前端 >css教程

    css3 图片 抖动效果

    高洛峰高洛峰2017-02-09 16:22:04原创3056
    @-moz-keyframes tada{
        0%{-moz-transform:scale(1);}
        10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
        40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
        100%{-moz-transform:scale(1) rotate(0);}
       }
    
      @-webkit-keyframes tada{
        0%{-webkit-transform:scale(1);}
        10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
        30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
        40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
        100%{-webkit-transform:scale(1) rotate(0);}}
    
    .doudun:hover{
      -webkit-animation: tada 1s .2s ease both;
      -moz-animation: tada 1s .2s ease both;
    }

    更多css3 图片 抖动效果相关文章请关注PHP中文网!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 css
    上一篇:CSS的最核心概念 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 手把手教你使用CSS实现酷炫六边形网格背景图• 聊聊怎么利用CSS实现波浪进度条效果• 实例详解CSS渐变锯齿问题如何解决!• 另辟蹊径!看看使用CSS滤镜怎么构建圆角和波浪效果• 聊聊怎么利用 CSS 构建花式透视背景
    1/1

    PHP中文网