\r\n\t\t
  • \r\n\t\t
  • \r\n\t\t
  •  
  • \r\n\t\t
  •   \r\n\t\t\t\t
    \r\n\t\t\t\t
    \r\n\t\t\t\r\n\t\t
  • \r\n\t\r\n\r\n

    CSS代码如下:

    \r\n
    \r\n\t
      \r\n\t\t
    1. @import url();
    2. \r\n\t\t
    3. \r\n\t\t\t
      .clearfix {
      \r\n\t\t\t
        *zoom: 1;
      \r\n\t\t\t
      }
      \r\n\t\t
    4. \r\n\t\t
    5. \r\n\t\t\t
      .clearfix:after {
      \r\n\t\t\t
        content: \"\";
      \r\n\t\t\t
        display: table;
      \r\n\t\t\t
        clear: both;
      \r\n\t\t\t
      }
      \r\n\t\t
    6. \r\n\t\t
    7. \r\n\t\t\t
      body {
      \r\n\t\t\t
        background: #fff;
      \r\n\t\t\t
        font-family: Lato;
      \r\n\t\t\t
        -webkit-font-smoothing: antialiased;
      \r\n\t\t\t
      }
      \r\n\t\t\t
      \r\n\t\t\t\t
       
      \r\n\t\t\t
      \r\n\t\t
    8. \r\n\t\t
    9. 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; }
    10. \r\n\t\t
    11. \r\n\t\t\t
      img {
      \r\n\t\t\t
        position: absolute;
      \r\n\t\t\t
        margin: auto;
      \r\n\t\t\t
        top: 0; left: 0; bottom: 0; right: 0;
      \r\n\t\t\t
        width: 100%;
      \r\n\t\t\t
        height: 100%;
      \r\n\t\t\t
        border-radius: 1px;
      \r\n\t\t\t
        box-shadow: 0 0 0 4px #fff;
      \r\n\t\t\t
        cursor: pointer;
      \r\n\t\t\t
        animation:        unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -o-animation:     unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -ms-animation:    unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -moz-animation:   unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -webkit-animation: unselected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
      }
      \r\n\t\t
    12. \r\n\t\t
    13. \r\n\t\t\t
      \r\n\t\t\t\t
      @keyframes unselected {
      \r\n\t\t\t\t
        0% { box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t\t
        50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
      }
      \r\n\t\t\t\t
      @-o-keyframes unselected {
      \r\n\t\t\t\t
        0% { box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t\t
        50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
      }
      \r\n\t\t\t\t
      @-ms-keyframes unselected {
      \r\n\t\t\t\t
        0% { box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t\t
        50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
      }
      \r\n\t\t\t\t
      @-moz-transition unselected {
      \r\n\t\t\t\t
        0% { box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t\t
        50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
      }
      \r\n\t\t\t\t
      @-webkit-keyframes unselected {
      \r\n\t\t\t\t
        0% { box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t\t
        50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t\t
      }
      \r\n\t\t\t
      \r\n\t\t
    14. \r\n\t\t
    15. li { position: relative; margin: 10px; width: 157px; height: 157px; float: left; }
    16. \r\n\t\t
    17. \r\n\t\t\t
      li:before {
      \r\n\t\t\t
        content: \"2714\";
      \r\n\t\t\t
        display: block;
      \r\n\t\t\t
        position: absolute;
      \r\n\t\t\t
        margin: auto;
      \r\n\t\t\t
        top: 0; left: 0; bottom: 0; right: 0;
      \r\n\t\t\t
        width: 40px;
      \r\n\t\t\t
        height: 40px;
      \r\n\t\t\t
        line-height: 40px;
      \r\n\t\t\t
        background:  #00c09e;
      \r\n\t\t\t
        border-radius: 50px;
      \r\n\t\t\t
        color: #fff;
      \r\n\t\t\t
        text-align: center;
      \r\n\t\t\t
        font-size: 16px;
      \r\n\t\t\t
        z-index: 10;
      \r\n\t\t\t
        opacity: 0;
      \r\n\t\t\t
        transition:         0.3s linear;
      \r\n\t\t\t
        -o-transition:      0.3s linear;
      \r\n\t\t\t
        -ms-transition:     0.3s linear;
      \r\n\t\t\t
        -moz-transition:    0.3s linear;
      \r\n\t\t\t
        -webkit-transition: 0.3s linear;
      \r\n\t\t\t
        -o-user-select:      none;
      \r\n\t\t\t
        -moz-user-select:    none;
      \r\n\t\t\t
        -webkit-user-select: none;
      \r\n\t\t\t
        cursor: pointer;
      \r\n\t\t\t
      }
      \r\n\t\t
    18. \r\n\t\t
    19. \r\n\t\t\t
      \r\n\t\t\t\t
      li.selected:before {
      \r\n\t\t\t\t
        opacity: 1;
      \r\n\t\t\t\t
      }
      \r\n\t\t\t
      \r\n\t\t
    20. \r\n\t\t
    21. \r\n\t\t\t
      li.selected img {
      \r\n\t\t\t
        box-shadow: 0 0 0 4px #00c09e;
      \r\n\t\t\t
        animation: selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -o-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -ms-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -moz-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
        -webkit-animation:selected 0.3s cubic-bezier(0.250, 0.100, 0.250, 1.000);
      \r\n\t\t\t
      }
      \r\n\t\t
    22. \r\n\t\t
    23. \r\n\t\t\t
      @keyframes selected {
      \r\n\t\t\t
        0% { border-color: #fff; }
      \r\n\t\t\t
        50% { transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
      }
      \r\n\t\t\t
      @-o-keyframes selected {
      \r\n\t\t\t
        0% { box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t
        50% { -o-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
      }
      \r\n\t\t\t
      @-ms-keyframes selected {
      \r\n\t\t\t
        0% { box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t
        50% { width: 45%; height: 45%; opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
      }
      \r\n\t\t\t
      @-moz-transition selected {
      \r\n\t\t\t
        0% { box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t
        50% { -moz-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
      }
      \r\n\t\t\t
      @-webkit-keyframes selected {
      \r\n\t\t\t
        0% { box-shadow: 0 0 0 4px #fff; }
      \r\n\t\t\t
        50% { -webkit-transform: scale(0.5); opacity: 0.8; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
        80%,100% { width: 100%; height: 100%; box-shadow: 0 0 0 4px #00c09e; }
      \r\n\t\t\t
      }
      \r\n\t\t
    24. \r\n\t
    \r\n
    \r\n
    其中很少见的样式
    \r\n\t  -webkit-font-smoothing: antialiased; 是CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性。有3个属性:none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿。
    \r\n
    源文件下载
    \r\n", "copyrightHolder": "本站原创" }
    您的位置: 首页 >日志>前端技术>详细内容

    前端技术

    HTML5+CSS3实现图片选中特效

    来源:本站原创 发布时间:2017-03-27 17:10:26 浏览次数: 【字体:

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

    HTML代码如下:  

    1. HTML5+CSS3实现图片选中特效
    2.  
    3.   
      •  
      •  
      •  
      •  
      •  
      •  
      •  
      •  

    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; }
      }
    其中很少见的样式
      -webkit-font-smoothing: antialiased; 是CSS3中用于webkit引擎(如chrome)中设置字体的抗锯齿或者说光滑度的属性。有3个属性:none用于小像素的文本、subpixel-antialiased浏览器默认的、antialiased反锯齿。
    源文件下载