【前端案例】06 - 实现鼠标接触箭头放大缩小

1. 页面效果 :

1. 页面结构：

<a href="#" class="more">
     查看更多
    <i class="iconfont icon-jiantou"></i>
</a>

2. 页面样式: 这里使用的 less的语法 .more { &:hover { .iconfont } } 等价于 .more:hover .iconfont { }

/* 箭头缩放动画 */
        @keyframes zoom {
          0% {
            /* 确定变形的中心 */
            transform-origin: left;
            transform: scale(1);
            font-weight: 500;
          }

          25% {
            transform-origin: left;
            transform: scale(1.2);
            font-weight: 600;
          }

          50% {
            transform-origin: left;
             transform: scale(1.5);
            font-weight: 800;
           }

          75% {
            transform-origin: left;
            transform: scale(1.3);
            font-weight: 600;
          }

          100% {
            transform-origin: left;
            transform: scale(1);
            font-weight: 500;
          }
        }


  .more {
          position: absolute;
          right: 20px;
          display: inline-block;
          height: 33px;
          line-height: 33px;
          font-size: 14px;
          vertical-align: middle;
          &:hover {
            .iconfont {
              /* 只有块级元素 或 行内块元素才有 transform 属性 */
              display: inline-block;
              /* 动画名称 */
              animation-name: zoom;
              /* 持续时间 */
              animation-duration: .6s;
              /* 动画重复次数 */
              animation-iteration-count: infinite;
              /* 是否反方向播放 默认的是 normal alternate反方向播放  */
              animation-direction: alternate;
              /* 动画运动的速度曲线 */
              animation-timing-function: linear;
            }
          }
        }