做有态度的前端团队

网易FEG前端团队

十月知识记录

最近做镇魔曲手游项目,对做项目及注重交互又有了深一层的了解。这里学习并记录几个技能点,方便以后开发。

一、水波纹交互效果

jaiohu.png

鼠标交互效果:鼠标滑上去时出现水波纹由内往外扩张并逐渐消失。那这个效果是怎么实现的呢。

<div class="skill-slide">
   <a href="javascript:;"></a>
</div>
.skill-slide a{
    width:70px;
    height:70px;
    border-radius: 50%;
    border:2px solid #ccc;
    margin:50px;
    display:block;
    .hvr-ripple-out-hover();
    .transition(all .2s ease 0s);
}
.hvr-ripple-out-hover() {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    &:before {
        content: '';
        position: absolute;
        border: #e1e1e1 solid 3px;
        display: none\9;
        border-width: 0px\9;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 50%;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
    }
    &:hover:before,
    &:focus:before,
    &:active:before {
        -webkit-animation-name: hvr-ripple-out;
        animation-name: hvr-ripple-out;
    }
}

@-webkit-keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0;
    }
}

@keyframes hvr-ripple-out {
    100% {
        top: -12px;
        right: -12px;
        bottom: -12px;
        left: -12px;
        opacity: 0;
    }
}

二、按钮手推门交互效果

未命名.png

鼠标交互:鼠标移上去时,橙黄色背景从左往右推进,鼠标移出来时橙黄色背景则缩回去。

效果点击 http://zm.163.com/

<div class="cBtn">
  <a href="http://zm.16163.com/" target="_blank">官方论坛</a>
  <div class="cBtn-ove">
      <div class="cBtn-hover">
         <a href="http://zm.16163.com/" target="_blank">官方论坛</a>
      </div>                 
  </div>
</div>

第一个a标签则是静态时我们看到的。下面再建一个盒子用以放置鼠标移上去后的效果。初始 width:0; 鼠标经过 width:100%; 动画而成。

.cBtn(@fSize,@width,@height,@lHeight,@bColor,@aColor) {
    position:absolute;
    text-align: center;
    border:1px solid @bColor;
    width:@width;
    height:@height;
    //text-indent:@tIndent;
    line-height:@lHeight;
    font-size:@fSize;
    //background:@BbgUrl;
    //background-position:@BbgPos;
    cursor:pointer;
    a {
        display:block;
        color:@bColor;
        &:hover{
            text-decoration: none;
        }
    }

    &:hover {
        .cBtn-ove {
            width:100%;
        }
    }

    .cBtn-ove {
        position:absolute;
        top:0px;
        left:0px;
        width:0;
        height:@height;
        overflow:hidden;
        .transition(width .5s ease);
        .cBtn-hover {
            width:@width;
            height:@height;
            //text-indent:@tIndent;
            line-height:@lHeight;
            border:1px solid @bColor;
            font-size:@fSize;
            //background:@BbgUrl;
            //background-position:@AbgPos;
            background-color:@bColor;
            a {
                display:block;
                color:@aColor;
                text-decoration: none;
            }
        }
    }
}

手机阅读请扫描下方二维码:

none
上一篇:再聊PC页面适配   下一篇:Why We Chose Vue.js

已有 66 条评论

  1. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  2. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  3. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  4. zgoqydyqewxgzhvpqsmn

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  5. admin%0d%0aCRLF-Header:CRLF-Value

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  6. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  7. 12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  8. admin

    zgoqydyqewxgzhvpqsmn

  9. admin

    12345678 ali-40.gif ali-41.gif ali-42.gif ali-43.gif ali-44.gif ali-45.gif ali-46.gif ali-47.gif ali-48.gif ali-49.gif ali-50.gif ali-51.gif ali-53.gif ali-54.gif ali-55.gif ali-56.gif ali-57.gif ali-58.gif ali-59.gif ali-60.gif ali-61.gif

  10. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  11. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  12. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  13. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  14. 1

    1

  15. 1

    1

  16. 1

    555

  17. 1

    1

  18. 1

    555

  19. 1

    1

  20. 1

    1

  21. 1

    1

  22. 1

    1

  23. 1

    1

  24. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  25. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  26. 1

    1

  27. 1

    555

  28. 1

    1

  29. 1

    1

  30. 1

    555

  31. 1

    1

  32. 1

    555

  33. 1

    1

  34. 1

    1

  35. 1

    1

  36. 1

    1

  37. 1

    1

  38. 1

    1

  39. 1

    1

  40. 1

    1

  41. 1

    1

  42. 1

    1

  43. 1

    1

  44. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif