最近学习了html5图片选中特效，非常实用而且很炫，当图片被选中时，图片上就会覆盖一个半透明的层，上面有一个勾，并且在选中的时候图片出现弹跳的动画效果。

HTML代码如下：  

10.  
11.   
    •  
    • 
     
    
     
    
     
    
     
    
     
    
     
    
     
    

CSS代码如下：

1. @import url();
2. .clearfix {
     *zoom: 1;
   }
3. .clearfix:after {
     content: "";
     display: table;
     clear: both;
   }
4. body {
     background: #fff;
     font-family: Lato;
     -webkit-font-smoothing: antialiased;
   }
    
5. ul, div { position: relative; margin: 50px auto; width: 710px; padding: 0; list-style: none; text-align: center; text-transform: uppercase; font-weight: 900; font-size: 20px; line-height: 40px; color: #555; }
6. img {
     position: absolute;
     margin: auto;
     top: 0; left: 0; bottom: 0; right: 0;
     width: 100%;
     height: 100%;
     border-radius: 1px;
     box-shadow: 0 0 0 4px #fff;
     cursor: pointer;
     animation:        unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
     -o-animation:     unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
     -ms-animation:    unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
     -moz-animation:   unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
     -webkit-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
   }
7. @keyframes unselected {

     0% { box-shadow: 0 0 0 4px #00c09e; }

     50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }

     80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }

   }

   @-o-keyframes unselected {

     0% { box-shadow: 0 0 0 4px #00c09e; }

     50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }

     80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }

   }

   @-ms-keyframes unselected {

     0% { box-shadow: 0 0 0 4px #00c09e; }

     50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #fff; }

     80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }

   }

   @-moz-transition unselected {

     0% { box-shadow: 0 0 0 4px #00c09e; }

     50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }

     80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }

   }

   @-webkit-keyframes unselected {

     0% { box-shadow: 0 0 0 4px #00c09e; }

     50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }

     80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }

   }
8. li { position: relative; margin: 10px; width: 157px; height: 157px; float: left; }
9. li:before {
     content: "2714";
     display: block;
     position: absolute;
     margin: auto;
     top: 0; left: 0; bottom: 0; right: 0;
     width: 40px;
     height: 40px;
     line-height: 40px;
     background:  #00c09e;
     border-radius: 50px;
     color: #fff;
     text-align: center;
     font-size: 16px;
     z-index: 10;
     opacity: 0;
     transition:         0.3s linear;
     -o-transition:      0.3s linear;
     -ms-transition:     0.3s linear;
     -moz-transition:    0.3s linear;
     -webkit-transition: 0.3s linear;
     -o-user-select:      none;
     -moz-user-select:    none;
     -webkit-user-select: none;
     cursor: pointer;
   }
10. li.selected:before {

      opacity: 1;

    }
11. li.selected img {
      box-shadow: 0 0 0 4px #00c09e;
      animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      -o-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      -ms-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      -moz-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      -webkit-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
    }
12. @keyframes selected {
      0% { border-color: #fff; }
      50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
    }
    @-o-keyframes selected {
      0% { box-shadow: 0 0 0 4px #fff; }
      50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
    }
    @-ms-keyframes selected {
      0% { box-shadow: 0 0 0 4px #fff; }
      50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
    }
    @-moz-transition selected {
      0% { box-shadow: 0 0 0 4px #fff; }
      50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
    }
    @-webkit-keyframes selected {
      0% { box-shadow: 0 0 0 4px #fff; }
      50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
    }