loading...

0

clip:rect矩形剪裁功能

css读完大概需要1分钟

  • 发布时间:2017-09-01 22:00 星期五
  • 刘伟波
  • 111
  • 更新于2017-09-01 22:00 星期五

clip:rect(0,400px,2px,0)

四个参数分别为上右下左距离左边的距离

.line:hover::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
border: 2px solid skyblue;
animation: lineOne 8s linear infinite;
animation-delay:-4s;
z-index: 99;
}

@keyframes lineOne {
0%,100%{clip:rect(0,400px,2px,0)}
25%{clip:rect(0,3px,329px,0)}
50%{clip:rect(326px,400px,329px,2px)}
75%{clip:rect(0,400px,328px,396px)}
}


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!