loading...

0

clip:rect矩形剪裁功能

css读完大概需要1分钟

  • 发布时间:2017-09-01 22:00 星期五
  • 刘伟波
  • 576
  • 更新于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字符
    关于技术问题或者有啥不懂的都可以来 我的视频空间 提问, 推荐作者总结知识点 前端知识体系, 感謝支持!