画线动画left,down,lef with purecss
Line drawing animation left, down, lef with pure css
我是用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 class="transitionLine"></div>
我的css好像不能断线加载,怎么解决?
你可以按照我的代码片段实现这个效果。
我使用 Two keyframes
和 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 class="transitionLine"></div>
您可以使用渐变画线,而且只需要一个关键帧:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
0% 5px,
5px 0%,
0% 5px;
background-position:
top left,
top center,
150px 100%;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
30% {
background-size:
50% 5px,
5px 0%,
0% 5px;
}
/*load down*/
60% {
background-size:
50% 5px,
5px 100%,
0% 5px;
}
/*load to left*/
100% {
background-size:
50% 5px,
5px 100%,
50% 5px;
}
}
<div class="transitionLine"></div>
您可以轻松扩展到任意数量的行:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
5px 0%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
background-position:
bottom left,
top left,
top center,
150px 100%,
right bottom;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
20% {
background-size:
5px 100%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
}
40% {
background-size:
5px 100%,
50% 5px,
5px 0%,
0% 5px,
5px 0%;
}
60% {
background-size:
5px 100%,
50% 5px,
5px 100%,
0% 5px,
5px 0%;
}
80% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 0%;
}
100% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 100%;
}
}
<div class="transitionLine"></div>
.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 1s;
-moz-animation: increase 1s;
-o-animation: increase 1s;
animation: increase 1s;
animation-fill-mode: forwards;
}
.transitionLine:before{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseA 1s;
-moz-animation: increaseA 1s;
-o-animation: increaseA 1s;
animation: increaseA 1s;
animation-fill-mode: forwards;
margin: -10px 0 0 510px;
animation-delay: 1s;
display: inline-block;
opacity: 0;
}
.transitionLine:after{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseB 1s;
-moz-animation: increaseB 1s;
-o-animation: increaseB 1s;
animation: increaseB 1s;
animation-fill-mode: forwards;
margin: 0px 0 0 510px;
animation-delay: 2s;
display: inline-block;
opacity: 0;
}
@keyframes increase {
0% {
width: 0px;
}
100% {
width: 500px;
}
}
@keyframes increaseA {
0% {
height: 0px;
opacity: 1;
}
100% {
height: 500px;
opacity: 1;
}
}
@keyframes increaseB {
0% {
width: 0px;
opacity: 1;
}
100% {
width: 500px;
opacity: 1;
}
}
<div class="transitionLine"></div>
我是用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 class="transitionLine"></div>
我的css好像不能断线加载,怎么解决?
你可以按照我的代码片段实现这个效果。
我使用 Two keyframes
和 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 class="transitionLine"></div>
您可以使用渐变画线,而且只需要一个关键帧:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
0% 5px,
5px 0%,
0% 5px;
background-position:
top left,
top center,
150px 100%;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
30% {
background-size:
50% 5px,
5px 0%,
0% 5px;
}
/*load down*/
60% {
background-size:
50% 5px,
5px 100%,
0% 5px;
}
/*load to left*/
100% {
background-size:
50% 5px,
5px 100%,
50% 5px;
}
}
<div class="transitionLine"></div>
您可以轻松扩展到任意数量的行:
.transitionLine {
width:300px;
height:100px;
background-image:
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e),
linear-gradient(#ef4e4e,#ef4e4e);
background-size:
5px 0%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
background-position:
bottom left,
top left,
top center,
150px 100%,
right bottom;
background-repeat:no-repeat;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
20% {
background-size:
5px 100%,
0% 5px,
5px 0%,
0% 5px,
5px 0%;
}
40% {
background-size:
5px 100%,
50% 5px,
5px 0%,
0% 5px,
5px 0%;
}
60% {
background-size:
5px 100%,
50% 5px,
5px 100%,
0% 5px,
5px 0%;
}
80% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 0%;
}
100% {
background-size:
5px 100%,
50% 5px,
5px 100%,
50% 5px,
5px 100%;
}
}
<div class="transitionLine"></div>
.transitionLine {
height:0px;
width:1px;
border:10px solid #ef4e4e;
-webkit-animation: increase 1s;
-moz-animation: increase 1s;
-o-animation: increase 1s;
animation: increase 1s;
animation-fill-mode: forwards;
}
.transitionLine:before{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseA 1s;
-moz-animation: increaseA 1s;
-o-animation: increaseA 1s;
animation: increaseA 1s;
animation-fill-mode: forwards;
margin: -10px 0 0 510px;
animation-delay: 1s;
display: inline-block;
opacity: 0;
}
.transitionLine:after{
height: 0px;
content: " ";
width: 0px;
border: 10px solid #ef4e4e;
-webkit-animation: increaseB 1s;
-moz-animation: increaseB 1s;
-o-animation: increaseB 1s;
animation: increaseB 1s;
animation-fill-mode: forwards;
margin: 0px 0 0 510px;
animation-delay: 2s;
display: inline-block;
opacity: 0;
}
@keyframes increase {
0% {
width: 0px;
}
100% {
width: 500px;
}
}
@keyframes increaseA {
0% {
height: 0px;
opacity: 1;
}
100% {
height: 500px;
opacity: 1;
}
}
@keyframes increaseB {
0% {
width: 0px;
opacity: 1;
}
100% {
width: 500px;
opacity: 1;
}
}
<div class="transitionLine"></div>