编程 编程 关注:1 内容:65

个性抖动图片或文字,简单CSS即可实现

  • 查看作者
  • 打赏作者
    • 编程
    • Lv.18
      神隐会员
      shfwpt.com

      需要的地方设置  class=”doume”  即可,效果自己可以随意更改!

         .doume{
                  -webkit-animation:tada 1s .2s ease both infinite ;
                  -moz-animation:tada 1s .2s ease both infinite ;
              }   
              @-webkit-keyframes flipInY{
                  0%{-webkit-transform:perspective(400px) rotateY(90deg);opacity:0}
                  40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
                  70%{-webkit-transform:perspective(400px) rotateY(10deg)}
                  100%{-webkit-transform:perspective(400px) rotateY(0deg);opacity:1}
              }
              @-moz-keyframes flipInY{
                  0%{-moz-transform:perspective(400px) rotateY(90deg);opacity:0}
                  40%{-moz-transform:perspective(400px) rotateY(-10deg)}
                  70%{-moz-transform:perspective(400px) rotateY(10deg)}
                  100%{-moz-transform:perspective(400px) rotateY(0deg);opacity:1}
              }
              @-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.1) rotate(3deg)}
                  40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg)}
                  100%{-webkit-transform:scale(1) rotate(0)}
              }
              @-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.1) rotate(3deg)}
                  40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg)}
                  100%{-moz-transform:scale(1) rotate(0)}
              }

      请登录之后再进行评论

      登录
    • 做任务
    • 发表内容