我怎样才能把一个圆圈的 SVG 图像放在网页的底部，以一种你一直只能看到上半部分的方式

Question

I want to make the circle image spin so you only see the top half as it spins and the user cant scroll down to see the other half, while not adding scroll bars due to scale increase of the image or width/height. Example can this be done with CSS or java?

Answer 1

This can be pretty easily accomplished by creating an absolutely positioned overflow-hidden wrapper, and adding a spin animation to an element inside the wrapper.

 .spinner { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); overflow: hidden; height: calc(50vw / 2); }.spinner img { animation: spin 5s linear infinite; width: 50vw; border-radius: 100%; } @keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} }

 <div class="spinner"> <img src="https://picsum.photos/200"> </div>