我怎樣才能把一個圓圈的 SVG 圖像放在網頁的底部，以一種你一直只能看到上半部分的方式

Question

我想讓圓形圖像旋轉，因此您只能在旋轉時看到上半部分，而用戶無法向下滾動以查看另一半，同時由於圖像或寬度/高度的比例增加而不會添加滾動條。 示例可以使用 CSS 或 java 完成嗎？

Answer 1

這可以很容易地通過創建一個絕對定位的溢出隱藏包裝器，並將旋轉 animation 添加到包裝器內的元素來完成。

 .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>