我正在尝试在 SVG 中复制此 GIF:
.barsBox
{
overflow: hidden;
display: flex;
width: 108px;
margin: 0 auto;
}
.bars
{
animation: scroll 0.7s steps(7) infinite;
}
@keyframes scroll
{
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(108px, 0, 0);
}
}
GIF:
<img src="https://i.stack.imgur.com/La7ZE.gif">
SVG:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145" viewBox="0 0 145 109" shape-rendering="crispEdges">
<g id="bg">
<image xlink:href="https://i.stack.imgur.com/eZGeS.png"/>
</g>
<g class="barsBox">
<g class="bars">
<path fill="#f9f9f9" d="M17.999 4.961h14.729v64.476H17.999zM110.39 69.437h15.622v8.56H110.39z"/>
<path fill="#ff0" d="M32.728 4.961h16.068v64.476H32.728z"/>
<path fill="#0ff" d="M48.796 4.961h15.622v64.476H48.796zM79.593 69.437h14.952v8.56H79.593z"/>
<path fill="#0f0" d="M64.418 4.961h15.175v64.476H64.418z"/>
<path fill="#f0f" d="M79.593 4.961h14.952v64.476H79.593zM48.796 69.437h15.622v8.56H48.796z"/>
<path fill="red" d="M94.545 4.961h15.845v64.476H94.545z"/>
<path fill="#00f" d="M110.39 4.961h15.622v64.476H110.39zM17.999 69.437h14.729v8.56H17.999z"/>
<path fill="#090909" d="M32.728 69.437h16.068v8.56H32.728zM64.418 69.437h15.175v8.56H64.418zM94.545 69.437h15.845v8.56H94.545z"/>
</g>
</g>
</svg>
我正在尝试解决两个问题:
overlow: hidden
中的 .barsBox
不起作用,由于某种原因,整个元素与其子元素一起移动感谢@enxaneta指出了正确的方向,这里是任何感兴趣的人的工作代码。
#bars
{
animation: scroll 0.7s steps(7) infinite;
}
@keyframes scroll
{
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(108px, 0, 0);
}
}
GIF:
<img src="https://i.stack.imgur.com/La7ZE.gif">
SVG:
<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="145" viewBox="0 0 145 109" shape-rendering="crispEdges">
<g id="bg">
<image xlink:href="https://i.stack.imgur.com/eZGeS.png"/>
</g>
<clipPath id="barsClip">
<rect x="17.999" y="4.961" width="108" height="73.036"/>
</clipPath>
<defs>
<g id="bars">
<path fill="#f9f9f9" d="M17.999 4.961h15.428v64.476H17.999zM110.567 69.437h15.428v8.56H110.567z"/>
<path fill="#ff0" d="M33.427 4.961h15.428v64.476H33.427z"/>
<path fill="#0ff" d="M48.855 4.961h15.428v64.476H48.855zM79.711 69.437h15.428v8.56H79.711z"/>
<path fill="#0f0" d="M64.283 4.961h15.428v64.476H64.283z"/>
<path fill="#f0f" d="M79.711 4.961h15.428v64.476H79.711zM48.855 69.437h15.428v8.56H48.855z"/>
<path fill="red" d="M95.139 4.961h15.428v64.476H95.139z"/>
<path fill="#00f" d="M110.567 4.961h15.428v64.476H110.567zM17.999 69.437h15.428v8.56H17.999z"/>
<path fill="#090909" d="M33.427 69.437h15.428v8.56H33.427zM64.283 69.437h15.428v8.56H64.283zM95.139 69.437h15.428v8.56H95.139z"/>
<!--extra bars to the left-->
<path fill="#f9f9f9" d="M-89.997 4.961h15.428v64.476H-89.997zM2.571 69.437h15.428v8.56H2.571z"/>
<path fill="#ff0" d="M-74.569 4.961h15.428v64.476H-74.569z"/>
<path fill="#0ff" d="M-59.141 4.961h15.428v64.476H-59.141zM-28.285 69.437h15.428v8.56H-28.285z"/>
<path fill="#0f0" d="M-43.713 4.961h15.428v64.476H-43.713z"/>
<path fill="#f0f" d="M-28.285 4.961h15.428v64.476H-28.285zM-59.141 69.437h15.428v8.56H-59.141z"/>
<path fill="red" d="M-12.857 4.961h15.428v64.476H-12.857z"/>
<path fill="#00f" d="M2.571 4.961h15.428v64.476H2.571zM-89.997 69.437h15.428v8.56H-89.997z"/>
<path fill="#090909" d="M-74.569 69.437h15.428v8.56H-74.569zM64.283 69.437h15.428v8.56H64.283zM-12.857 69.437h15.428v8.56H-12.857z"/>
</g>
</defs>
<use clip-path="url(#barsClip)" href="#bars"/>
</svg>