时间戳

首页 > 解决方案 > 我怎样才能把一个圆圈的 SVG 图像放在网页的底部，这样你就只能一直看到上半部分

html - 我怎样才能把一个圆圈的 SVG 图像放在网页的底部，这样你就只能一直看到上半部分

问题描述

我想让圆形图像旋转，因此您只能在旋转时看到上半部分，而用户无法向下滚动以查看另一半，同时由于图像或宽度/高度的比例增加而不会添加滚动条。 示例 可以用 CSS 或 java 完成吗？

标签： htmlcss

解决方案

这可以很容易地通过创建一个绝对定位的溢出隐藏包装器，并向包装器内的元素添加旋转动画来完成。

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

推荐阅读