我有一个基本的动画,想要使用SVG制作。然而,我不确定如何从中心开始进行动画。作为一个SVG动画新手,我知道如何制作简单的动画,但是并没有找到一个确切的答案来解决我一直以来的问题。
/*MAIN ANIMATION*/
.line1,
.line2 {
position: absolute;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
transform: rotate(90deg);
}
.line1 {
top: 0px;
animation: line1 5s linear forwards; /*ANIMATION NAME AND TIMING*/
}
.line2 {
bottom: 0px;
animation: line2 5s linear forwards; /*ANIMATION NAME AND TIMING*/
}
.animationText {
width: 100%;
font-size: 30px;
font-weight: normal;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
这里有一个演示,展示了现在这些线条的样子: https://jsfiddle.net/7mastya4/6/
简而言之,我想要这些线从中心向外动画。 我知道如何进行标准的动画,但对于SVG和更改它们的动画起点,这对我来说还是比较新的。
谢谢任何帮助。
path
元素,而是line
元素,但也许对于线条也可以奏效。 - Paulie_Dline
元素的stroke-dashoffset
可以使用 CSS 进行动画处理,但据我所知,您无法通过它获得 由中心向外扩散 的动画效果。不过,您可以尝试像 此示例 中所示的方法。 - Harry