- .detail{position:relative;overflow:hidden;border: 1px solid #FFFFFF;border-radius: 4px;line-height: 30px;width: 120px;cursor: pointer;text-align: center;font-size: 18px;}
- .detail:before { content: ""; position: absolute; width:20px; height: 100%; top: 0; left: -150px; overflow: hidden;
- background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)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,.2)), color-stop(100%, rgba(255,255,255,0)));
- background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
- background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,.2)50%, rgba(255,255,255,0)100%);
- -webkit-transform: skewX(-25deg);
- -moz-transform: skewX(-25deg)
- animation:fadeIn 1s infinite;
- -webkit-animation:fadeIn 2s infinite;
- -moz-animation:fadeIn 2s infinite
- }
- @-webkit-keyframes fadeIn{
- 0%{left:0}
- 100%{left:150%}
- }
- @-moz-keyframes fadeIn{
- 0%{left:0}
- 100%{left: 150%;}
- }
- .detail:hover:before { left: 150%; transition: left 1s ease 0s; }
来源: http://www.qdfuns.com/article/20768/460bcdcea35987551432ce8f4b398cfb.html