您的位置:首页> 日志> 前端技术 正文
DTOP

HTML5+CSS3实现图片选中特效

NoyaHua | 2017年03月27日 |

>>收藏本文 已有 2条评论

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

HTML代码如下:  

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML5+CSS3实现图片选中特效</title>
  6. <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
  7. <script src='js/jquery.js'></script>
  8. <script src="js/index.js"></script>
  9. </head>
  10.   <body>
  11.   <ul>
  12.   <li><img src="11287113923_57d37ed9d3_q.jpg" /></li>
      <li><img src="8095683964_9e27753908_q.jpg" /></li>
      <li><img src="8018956825_67bf62c098_q.jpg" /></li>
      <li><img src="7587724752_cdb9f0c444_q.jpg" /></li>
      <li><img src="7587738254_707a32f27b_q.jpg" /></li>
      <li><img src="8095680852_893f685cbd_q.jpg" /></li>
      <li><img src="8018953043_c6ef9e3b29_q.jpg" /></li>
      <li><img src="7445019824_914dea4ac3_q.jpg" /></li>
  13. </ul>
    </body>
    </html>

CSS代码如下:

  1. @import url(http://fonts.googleapis.com/css?family=Lato:400,700);
  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; }
    }
其中很少见的样式
  -webkit-font-smoothing: antialiased; 是CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性。有3个属性:none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿。