像這種滑鼠經過或者 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);
                    }
            }