html - 用纯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>
推荐阅读
- firebase - FutureBuilder:在 nul 上调用了方法“&”
- selenium-webdriver - Selenium-Java - org.openqa.selenium.remote.UnreachableBrowserException:与远程浏览器通信时出错。它可能已经死了
- html - 标签内的 div 转到新行
- jenkins - 如何替换 Jenkins Groovy 脚本中的不安全方法?
- java - Webflux 中的 GroupBy
- c# - GraphQLHttpClient 嵌套 json 字符串 c#
- javascript - 如果使用输入值 id,则无法获得输出
- forms - Flutter Form - 保存所有表单字段后的事件
- firebase - 我可以在 FireStore 匿名登录中使用旧用户 uid 替换登录用户吗?
- java - 如何在 Java 中为自定义复数类定义 equals 函数?