CSS3一些特效

利用CSS3实现的一些特性，效果如下：
源码如下：

<style type="text/css">
  body{
    margin: 0 auto;
    margin-top: 50px;
  }
  .animated{
    animation-duration: 1s;
  }
  .block{
    width: 300px;
    height: 100px;
    color: #f35626;
    text-align: center;
    margin: 0 auto;
  }
  .block::before{
    content: 'Animate.css';
    font-size: 90px;
  }
  .contrl-btn{
    margin-top: 40px;
  }
  button{
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid #eee;
    background: #eee; 
    margin-right: 10px;
    outline: none;
    cursor: pointer;
  }
  @keyframes bounce {
      0%,100%,20%,50%,80% {
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0)
      }

      40% {
          -webkit-transform: translateY(-30px);
          -ms-transform: translateY(-30px);
          transform: translateY(-30px)
      }

      60% {
          -webkit-transform: translateY(-15px);
          -ms-transform: translateY(-15px);
          transform: translateY(-15px)
      }
  }
  .bounce{
    animation-name: bounce;
  }
  @keyframes flash {
      0%,100%,50% {
          opacity: 1
      }

      25%,75% {
          opacity: 0
      }
  }
  .flash{
    animation-name: flash;
  }
  @keyframes pulse {
      0%,100% {
          transform:scale(1);
      }

      50%{
          transform:scale(1.5);
      }
  }
  .pulse{
    animation-name: pulse;
  }
  @keyframes rubberBand {
      0% {
          -webkit-transform: scale(1);
          transform: scale(1)
      }

      30% {
          -webkit-transform: scaleX(1.25) scaleY(0.75);
          transform: scaleX(1.25) scaleY(0.75)
      }

      40% {
          -webkit-transform: scaleX(0.75) scaleY(1.25);
          transform: scaleX(0.75) scaleY(1.25)
      }

      60% {
          -webkit-transform: scaleX(1.15) scaleY(0.85);
          transform: scaleX(1.15) scaleY(0.85)
      }

      100% {
          -webkit-transform: scale(1);
          transform: scale(1)
      }
  }
  .rubberBand{
    animation-name: rubberBand;
  }
  @keyframes shake {
      0%,100% {
          transform: translateX(0);
      }

      10%,30%,50%,70%,90% {
          transform: translateX(10px);
      }

      20%,40%,60%,80% {
          transform: translateX(-10px);
      }
  }
  .shake{
    animation-name: shake;
  }

  @keyframes swing {
      0%,100% {
          transform: rotate(0deg);
      }

      25% {
          transform: rotate(15deg);
      }
      50%{
        transform: rotate(-5deg);
      }
      75% {
          transform: rotate(5deg);
      }
  }
  .swing{
    animation-name: swing;
  }
  @keyframes tdata {
      0%{
          transform: scale(0.5) rotate(-10deg);

      }
      20%{
        transform: scale(1.1) rotate(-10deg);
      }
      40% {
          transform:scale(1.1) rotate(15deg);
      }
      60%{
        transform:scale(1.1) rotate(-5deg);
      }
      80% {
          transform:scale(1.1) rotate(5deg);
      }
      100%{
        transform: scale(1) rotate(0deg);
      }
  }
  .tdata{
    animation-name: tdata;
  }
  @keyframes wobble {
      0%{
          transform: translateX(0) rotate(-4deg);
      }
      20%{
        transform: translateX(-100px) rotate(4deg);
      }
      40% {
          transform:translateX(80px) rotate(-2deg);
      }
      60%{
        transform: translateX(-60px) rotate(2deg);
      }
      80% {
          transform: translateX(40px) rotate(-1deg);
      }
      100%{
        transform: translateX(0) rotate(0);
      }
  }
  .wobble{
    animation-name: wobble;
  }
  @keyframes bounceIn {
      0%{
          transform: scale(1);
      }
      25%{
        transform: scale(0.6);
      }
      50% {
          transform:scale(1.1);
      }
      75%{
        transform: scale(0.9);
      }
      100%{
        transform: scale(1);
      }
  }
  .bounceIn{
    animation-name: bounceIn;
  }
</style>
<div class="block"></div>
<div class="contrl-btn"></div>
<script src="./jquery.js"></script>
<script type="text/javascript">
(function(){
  var animationParam ={
    animationName:'',
    animationDuration:''
  }
  function blockRemoveClass(){
    $('.block').removeClass(animationParam.animationName).removeClass('animated');
  }
  var animationArr = ['bounce','flash','pulse','rubberBand','shake','swing','tdata','wobble','bounceIn'];
  var lens = animationArr.length;
  var contrlBtnContent = '';
  for(var i=0;i<lens;i++){
    contrlBtnContent += '<button class=" ' + animationArr[i] + '-btn">' + animationArr[i] + '</button>';
  }
  $('.contrl-btn').append($(contrlBtnContent));
  $('.contrl-btn').click(function(e){
      animationParam.animationName=$(e.target).attr('class').split('-')[0];
      animationParam.animationDuration=1000;
      $('.block').addClass(animationParam.animationName).addClass('animated');
      setTimeout(blockRemoveClass,animationParam.animationDuration);


  })
}())
</script>

代码下载,请参考css3_effect源码