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)}
}
发表评论: