CSS 纯css画线动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39993244/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line drawing animation with pure css
提问by sawa
Is there any way to implement a CSS animation in which a dot grows to be a line?
有没有办法实现一个点变成一条线的 CSS 动画？
point l (a dot) ---------------------------> point m (a line)
I know this can be done with SVG, but I want to know if it is possible to be implemented with pure CSS.
我知道这可以用 SVG 来完成，但我想知道是否可以用纯 CSS 来实现。
回答by Curt
You could use a border on an element with 1px which grows to the required length.
您可以在 1px 的元素上使用边框，该边框可以增长到所需的长度。
Using @keyframesand animationproperties you can get this to start from page load.
使用@keyframes和animation属性，您可以从页面加载开始。
div{
height:0px;
width:1px;
border-bottom:1px solid #000;
-webkit-animation: increase 3s;
-moz-animation: increase 3s;
-o-animation: increase 3s;
animation: increase 3s;
animation-fill-mode: forwards;
}
@keyframes increase {
100% {
width: 300px;
}
}<div></div>回答by Deepak Yadav
Using transitionproperty in CSS, you can give drawing effect to a <div>by targeting its widthproperty.
使用transitionCSS 中的属性，您可以<div>通过定位其width属性来为 a 赋予绘图效果。
Hover over the orangecolor dot on result screen.
将鼠标悬停在结果屏幕上的橙色圆点上。
.point {
width: 6px;
height: 6px;
background: tomato;
transition: width 1s ease;
}
.point:hover {
width: 200px;
}<div class="point"></div>