console
<svg viewbox="0 0 350 500">
<g>
<g>
<g style="background: linear-gradient(to bottom,#d3d1f3,#f8cad7);">
<rect width="0" heigh="0" x="350" y="500" fill="transform">
<text x='188' y='411' font-size="30px" style="color: red;" text-anchor='middle'>点我查看更多</text>
<animate attributename="opacity" values="1;0" begin="click" dur="3s" ></animate>
</rect>
</g>
<g>
<g style="transform: translate(-350px,0);">
<foreignobject x='0' y='0' width="350" height="500">
<svg class="135svg" width="100%" height="100%" style="background-image: url(https://bcn.135editor.com/files/202208/Wf7gj96T_usjf.jpg) ;background-repeat:no-repeat;background-size:cover;"></svg>
</foreignobject>
</g>
<animatetransform attributename="transform" type="translate" values="-350 0; 0 0" begin="click+1s" dur='5s' fill="freeze"></animatetransform>
</g>
<g>
<g style="transform: translate(350px,0);">
<foreignobject x='0' y='0' width="350" height="500">
<svg class="135svg" width="100%" height="100%" style="background-image: url(https://bcn.135editor.com/files/202208/UqYUJrNO_bZp2.jpg) ;background-repeat:no-repeat;background-size:cover;"></svg>
</foreignobject>
</g>
<animatetransform attributename="transform" type="translate" values="350 0; 0 0" begin="click+1s" ></animatetransform>
</g>
</g>
<g style="transform: translateY(-500px);">
<g >
<foreignobject x='0' y='0' width="350" height="500">
<svg class="135svg" width="100%" height="100%" style="background-image: url(https://bcn.135editor.com/files/202208/vZFtZQ8D_3eZL.jpg) ;background-repeat:no-repeat;background-size:cover;"></svg>
</foreignobject>
</g>
<animate attributename="opacity" values="0;1" begin="click+3s" ></animate>
</g>
<animate attributename="transform" values="0;1" begin="click+3s" ></animate>
<g>
<text x='30' y='30' font-size="30px" style="color: #333;width:30px;line-height:1.1em;">秋</text>
</g>
</g>
</svg>