Question

好的，我有一个好的（我认为）。

我正在试图弄清楚如何在不使用闪光灯的情况下创建动画，其中svg图像旋转并改变颜色，同时在未来的网站上与某些音频循环同步。最后，我希望它在中心轴上旋转时看起来像心跳（缩放）到一些一致的简单节拍。

我甚至不知道如何从这开始。以下是我到目前为止的情况：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="700px" height="700px" viewBox="0 0 1000 500" enable-background="new 0 0 215.069 121.917" xml:space="preserve"><style>.style0{stroke:    #FFFFFF;stroke-miterlimit:  10;fill:    #231F20;


}.style0 {
animation:mymove 5s infinite;
-webkit-animation:mymove 2s linear infinite; /* Safari and Chrome */ 
-webkit-transform-origin:center;
}

@-webkit-keyframes mymove
{
0%   {-webkit-transform: rotate(0deg); fill: #000000;}
6.25%{-webkit-transform: rotate(27.5deg); scale(1,1);}
12.5%{-webkit-transform: rotate(45deg) scale(2,2);}
18.75%{-webkit-transform: rotate(62.5deg); scale(1,1);}
25%  {-webkit-transform: rotate(90deg) scale(1,1); fill: #78ab98;}
31.25%{-webkit-transform: rotate(117.5deg); scale(1,1);}
37.5%{-webkit-transform: rotate(135deg) scale(2,2);}
43.75%{-webkit-transform: rotate(162.5deg); scale(1,1);}
50%  {-webkit-transform: rotate(180deg) scale(1,1); fill: #aa7454;}
56.25%{-webkit-transform: rotate(207.5deg); scale(1,1);}
62.5%{-webkit-transform: rotate(225deg) scale(2,2);}
68.75%{-webkit-transform: rotate(252.5deg); scale(1,1);}
75%  {-webkit-transform: rotate(270deg) scale(1,1); fill: #123456;}
81.25%{-webkit-transform: rotate(297.5deg); scale(1,1);}
87.5%{-webkit-transform: rotate(315deg) scale(2,2);}
93.75.25%{-webkit-transform: rotate(242.5deg); scale(1,1);}
100% {-webkit-transform: rotate(360deg) scale(1,1); fill: #000000;}
}
</style><style>
</style><rect width="215.1" height="121.9" class="style0"/></svg>

和

<!DOCTYPE>
<html>
<head>

</head>
<body>
<h1> first svg try</h1>
<object type="image/svg+xml" data="svg.svg" id="img">Your browser no support</object>
</body>
</html>

非常感谢任何帮助

svg脉冲动画和颜色变化与音频同步

0 个答案: