
像这种鼠标经过或者 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------------------------
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;
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);
}
}