html – 使用纯css左,下,左边的线条绘制动画

概述我正在使用css过渡来绘制一条线,它从右到左运行或加载,然后向下,并继续加载到左边： point 1------point 2 | | | ---------point 3 这是我的css： .transitionLine { height:0px; width 我正在使用CSS过渡来绘制一条线,它从右到左运行或加载,然后向下,并继续加载到左边：

point 1------point 2                |               |               |               ---------point 3

这是我的CSS：

.Transitionline {		  height:0px;		  wIDth:1px;		  border:10px solID #ef4e4e;		  		  -webkit-animation: increase 3s;		  -moz-animation:    increase 3s; 		  -o-animation:      increase 3s; 		  animation:         increase 3s; 		  animation-fill-mode: forwards;		}		@keyframes increase {			/*load to left*/			30% {								wIDth: 500px;			}			/*load down*/			60% {				border-radius: 3px;								wIDth: 1000px;			}			/*load to left*/			100% {				border-radius: 3px;				wIDth: 1500px;			}		}

<div ></div>

我的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;    }}

<div ></div>

总结

以上是内存溢出为你收集整理的html – 使用纯css左,下,左边的线条绘制动画全部内容，希望文章能够帮你解决html – 使用纯css左,下,左边的线条绘制动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。