用css，增加按钮的一闪而过。

像这种鼠标经过或者 DOM元素被触发事件后会有一个一闪而过的动效，是我在开发中根据动画灵感写出来的，具体代码是运用了css的after尾类，所以要大家对尾类处理器又一定了解,开整。

首先dom结构就如上图一样，其中:

1:是包裹这两个的元素。
2:是这次主要操作的元素，通过Cauda来进行尾类的操作。
3是‘恋爱攻略’。

如上图这是主要的css样式，（这里我用到是less css处理器），其中我红圈圈的css样式，和我箭头指到的样式 是主要的代码，这里Img_Cudda,的宽度一定要是内容的高度和宽度这一点要注意。

剩下的就交给大家细品了，说道这里应该要整理一波代码了，不能广发图片是不是，哈哈哈。，带代码如下:

 

    <!-- 恋爱攻略 -->DOM元素
               <div class="Img_Cudda">
                   <div class="Cudda"></div>
                   <img  class="live_" src="" alt="">
                </div>

  .Img_Cudda{//恋爱攻略    这是css------------------------
                width: 143px;
                height: 44px; 
                position: absolute;
                top: 352px;
                left: 909px;
                overflow: hidden;
                .live_{
                    cursor: pointer;
                }
                &:hover .Cudda::after{
                    display: block;
                    animation: orot 0.3s ease-in-out forwards;
                    @keyframes orot {
                       100%{
                            margin-left:300px;
                        }
                    }
                    } 
                    .Cauda{
                        display: inline-block;
                    }
                    .Cudda::after{
                        content: '';
                        position: absolute;
                        width: 30px;
                        height: 44px;
                        margin-top: -22px;
                        overflow: hidden;
                        display: none;
                        z-index: 6;
                        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
                        background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)), color-stop(100%, rgba(255, 255, 255, 0)));
                        webkit-transform: skewX(-25deg);
                        transform: skewX(-20deg);
                    }
            }