如何实现一条线延申,并控制延申的方向"/>
记录:css如何实现一条线延申,并控制延申的方向
首先我们得思想是通过控制宽或者高来实现直线延申得效果
@keyframes box-1-hgt {0% {height: 0 * $remh;}100% {height: 44 * $remh;}
}
为了控制变化得方向,将直线得起点固定定好位置,此处利用得是绝对定位,比如需要从左向右延申,那么就将位置定位:left:
若从右向左则用right定位,同理,若从上向下定位用top定位等
.box {position: absolute;&.box-1 {top: 80 * $remh;right: -170 * $remh;width: 200 * $remh;height: 44 * $remh;&:before {position: absolute;content: '';bottom: 0;left: 0;height: 0;border-left: dashed 2 * $remh rgba(#fff, 0.26);}&:after {position: absolute;content: '';bottom: 0;right: 0;width: 0;border-bottom: dashed 2 * $remh rgba(#fff, 0.26);}}}
更多推荐
记录:css如何实现一条线延申,并控制延申的方向
发布评论