1
我想做一个变成直线的波动画。
我现在所拥有的是一个从左到右的波浪动画，请参阅下面的代码。也可以这样做只使用CSS？svg plus css动画
body {
\t width: 960px;
\t height: 100%;
\t background-color: #d3d3d3;
}
/*#wave1 {
\t transform: translate(-260px, 200px);
}*/
#wave1 {
\t animation: popup 5s ease infinite;
}
@keyframes popup {
\t 0% {
\t \t transform: translate(-500px, 0);
\t }
\t 100% {
\t \t transform: translate(400px, 0);
\t }
}
#wave2 {
\t animation: popup 5s ease infinite;
}
@keyframes popup {
\t 0% {
\t \t transform: translate(-500px, 0);
\t }
\t 100% {
\t \t transform: translate(400px, 0);
\t }
}
#wave3 {
\t animation: popup 5s ease infinite;
}
@keyframes popup {
\t 0% {
\t \t transform: translate(-500px, 0);
\t }
\t 100% {
\t \t transform: translate(400px, 0);
\t }
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="91.43 -87.5 960 200" overflow="visible" enable-background="new 91.43 -87.5 960 200" xml:space="preserve">
\t \t <defs> </defs>
\t \t <path id="wave1" fill="none" stroke="#2E2925" stroke-miterlimit="10" d="M0,24.5c28.57,0,28.57-24,57.141-24c28.57,0,28.57,24,57.141,24
\t c28.572,0,28.572-24,57.142-24c28.57,0,28.57,24,57.141,24c28.572,0,28.572-24,57.143-24c28.569,0,28.569,24,57.138,24
\t c28.57,0,28.57-24,57.14-24c28.57,0,28.57,24,57.139,24s28.569-24,57.14-24c28.57,0,28.57,24,57.14,24c28.572,0,28.572-24,57.145-24
\t s28.572,24,57.145,24c28.571,0,28.571-24,57.143-24c28.572,0,28.572,24,57.145,24c28.573,0,28.573-24,57.146-24
\t c28.571,0,28.571,24,57.143,24c28.573,0,28.573-24,57.146-24c28.573,0,28.573,24,57.146,24c28.574,0,28.574-24,57.149-24
\t s28.575,24,57.149,24" /> </svg>
\t <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="960px" height="200px" viewBox="120 -87.5 960 200" overflow="visible" enable-background="new 120 -87.5 960 200" xml:space="preserve">
\t \t <defs> </defs>
\t \t <path id="wave2" fill="none" stroke="#E74267" stroke-miterlimit="10" d="M0,0.5c14.633,0,14.633,24,29.266,24c14.632,0,14.632-24,29.265-24
\t c14.636,0,14.636,24,29.27,24c14.633,0,14.633-24,29.265-24c14.635,0,14.635,24,29.268,24c14.635,0,14.635-24,29.269-24
\t c14.633,0,14.633,24,29.267,24c14.633,0,14.633-24,29.267-24s14.634,24,29.266,24c14.635,0,14.635-24,29.269-24s14.634,24,29.268,24
\t s14.634-24,29.269-24c14.634,0,14.634,24,29.269,24c14.633,0,14.633-24,29.268-24c14.631,0,14.631,24,29.262,24
\t c14.633,0,14.633-24,29.266-24c14.632,0,14.632,24,29.266,24c14.631,0,14.631-24,29.263-24c14.634,0,14.634,24,29.266,24
\t c14.636,0,14.636-24,29.269-24c14.635,0,14.635,24,29.268,24s14.633-24,29.266-24s14.633,24,29.266,24s14.633-24,29.268-24
\t c14.633,0,14.633,24,29.266,24c14.637,0,14.637-24,29.271-24s14.635,24,29.268,24c14.635,0,14.635-24,29.27-24s14.635,24,29.27,24
\t s14.635-24,29.27-24s14.635,24,29.27,24s14.635-24,29.27-24c14.633,0,14.633,24,29.266,24c14.635,0,14.635-24,29.27-24
\t s14.635,24,29.27,24s14.635-24,29.271-24s14.637,24,29.271,24c14.639,0,14.639-24,29.275-24s14.637,24,29.273,24
\t c14.639,0,14.639-24,29.277-24s14.639,24,29.277,24" /> </svg>
\t <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="200px" viewBox="100.641 -75.5 960 200" overflow="visible" enable-background="new 100.641 -75.5 960 200" xml:space="preserve">
\t \t <defs> </defs>
\t \t <path id="wave3" fill="none" stroke="#000000" stroke-miterlimit="10" d="M1161.282,0.5c-19.359,0-19.359,48-38.719,48
\t c-19.355,0-19.355-48-38.713-48c-19.355,0-19.355,48-38.715,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.711,48
\t c-19.354,0-19.354-48-38.707-48c-19.355,0-19.355,48-38.713,48c-19.355,0-19.355-48-38.711-48s-19.355,48-38.713,48
\t c-19.354,0-19.354-48-38.709-48s-19.355,48-38.709,48s-19.354-48-38.709-48c-19.354,0-19.354,48-38.709,48
\t c-19.354,0-19.354-48-38.709-48c-19.354,0-19.354,48-38.71,48c-19.353,0-19.353-48-38.707-48c-19.353,0-19.353,48-38.706,48
\t s-19.353-48-38.705-48s-19.352,48-38.704,48c-19.353,0-19.353-48-38.705-48c-19.355,0-19.355,48-38.709,48
\t c-19.355,0-19.355-48-38.708-48c-19.356,0-19.356,48-38.71,48s-19.354-48-38.708-48s-19.354,48-38.708,48
\t c-19.355,0-19.355-48-38.708-48c-19.355,0-19.355,48-38.709,48s-19.354-48-38.709-48s-19.354,48-38.709,48S19.354,0.5,0,0.5" /> </svg>
你是不必要的定义 “弹出” 关键帧三次。一旦完成。 –
感谢您的信息。即时通讯只有3个月的HTML和CSS我明白我必须使用类或ID，所以我不必一遍又一遍地写代码。我尽量不要再犯同样的错误。 – pcuvi