html左侧黑色梯形状线条,html – 使用纯css左,下,左边的线条绘制动画

您可以根据我的代码段实现此效果.

我使用了两个关键帧和一个after属性来添加底线

.transitionLine {

height: 0px;

width: 1px;

border-top: 10px solid #ef4e4e;

border-right: 10px solid #ef4e4e;

position: relative;

-webkit-animation: increase 3s;

-moz-animation: increase 3s;

-o-animation: increase 3s;

animation: increase 3s;

animation-fill-mode: forwards;

}

.transitionLine:after {

content: '';

display: block;

height: 0px;

width: 1px;

border-top: 10px solid #ef4e4e;

border-right: 10px solid #ef4e4e;

-webkit-animation: increase2 3s;

-moz-animation: increase2 3s;

-o-animation: increase2 3s;

animation: increase2 3s;

animation-fill-mode: forwards;

position: absolute;

left: 100%;

bottom: 0;

}

@keyframes increase {

/*load to left*/

30% {

width: 200px;

height: 0px;

}

31% {

width: 200px;

height: 1px;

}

/*load down*/

60% {

height: 100px;

width: 200px;

}

/*load to left*/

100% {

height: 100px;

width: 200px;

}

}

@keyframes increase2 {

60% {

height: 0px;

width: 0px;

}

/*load to left*/

100% {

height: 0px;

width: 200px;

}

}