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;

}

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

html树状结构怎么展开,纯css实现树形结构
纯css实现属性结构 **css实现属性结构的思路是利用伪类实现树形结构连接线,如果想实现点击展开和收缩以及复选框效果还得配合js来实现.其实展开和收缩就是一个点击元素其子元素隐藏和显示的切换.* ...
three.js两个点给线条加宽度_用感性的方式练习线条，凤尾花21，彩铅手绘教程...
点击"专栏"查看更多干货文章关注很多初学者,觉得画一个苹果很简单,认为这种线条类的作品很难. 其实,可能对绘画有所误解. 画好苹果,首先得理解光影关系. 要表现好光影关系,得先学 ...
CSS：实现动态流光线条效果/动态流光线条颜色渐变效果
需求描述: 需要实现类似下图中的动态流光线条效果: 思路: 提到这种动态绘制矢量图形的需求,一般会想到使用canvas:由于笔者不太熟悉canvas动画也可以考虑用CSS来实现,这里先记录使用CSS实 ...
R语言ggplot2可视化基本散点图（设置X轴使用对数坐标）、并把成对的数据点用线条（line）连接起来、自定义配置线条颜色（Connecting Paired Points with lines)
R语言ggplot2可视化基本散点图(设置X轴使用对数坐标).并把成对的数据点用线条(line)连接起来.自定义配置线条颜色(Customizing Scatterplot Connecting Pa ...
纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
php开发愤怒的小鸟,如何使用纯CSS实现一只黑色的愤怒小鸟（附代码）
本篇文章给大家带来的内容是关于如何使用纯CSS实现一只黑色的愤怒小鸟(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github.co ...
手绘线条一直画不直_手绘板线条画不直怎么办？板绘画线诀窍分享
在数位板画画和在纸上画画是有一定区别的,线条很难控制,手绘板线条画不直,那么如何在数位板上画出流畅线条?越是习惯手绘的朋友,那你可能就需要画更多的时间来适应数位板的画图方式,今天微课菌给大家分享一组板 ...
R语言使用plot函数和lines函数可视化多条折线图（线图、line charts）进行对比分析、设置type参数自定义线条和点的关系、设置lty设置线条类型、col设置颜色、pch设置点形状等
R语言使用plot函数和lines函数可视化多条折线图(线图.line charts)进行对比分析.设置type参数自定义线条和点的关系.设置lty设置线条类型.col设置颜色.pch设置点形状.lw ...

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

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

最新文章

热门文章