javascript - 右上角的四分之一圆

Question

我想制作一个四分之一圆放置在我网站的右上角(固定)，我希望它在用户滚动时向其中心移动(我有用于缩小元素的代码但不是用于元素本身或其中心)

我使用以下代码缩小了 header :

HTML(脚本)

$(function(){
 var shrinkHeader = 50;
 $(window).scroll(function() {
 var scroll = getCurrentScroll();
  if ( scroll >= shrinkHeader ) {
       $('header').addClass('shrink');
    }
    else {
        $('header').removeClass('shrink');
    }
 });

当用户滚动时将收缩类应用于标题。当我弄清楚时，我会把它切换到四分之一圆。

注意:它将是白色的，中间有一个图标(作为我的导航切换按钮)

编辑:我问的是如何制作一个位于屏幕右上角的四分之一圆(固定)并且可以从右上角(圆的中心)动画

Answer 1

I am looking to make a quarter-circle to place in the top right corner of my website (fixed) I want it to animate towards its center when user scrolls

I am asking how to make a quarter-circle that sits top right of the screen (fixed) and can be animated from the top right corner (circle's center)

从上面的内容来看，您似乎想知道如何创建一个四分之一圆并使其缩小(使其朝向自己的右上角)。

创建四分之一圆很简单，可以使用 CSS 本身完成。通常建议使用 SVG 来创建形状，但这很简单。所需要做的就是创建一个正方形并将其左下角的边框半径设置为 100%。将它定位(固定)在页面的右上角也很简单。只需将 position: fixed 添加为 top 和 right 为 0px。

现在要缩小形状，只需将元素的 height 和 width 更改为 0px 并向其添加 转换 效果。在下面的代码片段中，我使用动画完成了它，因此它在代码片段窗口中很容易看到，但您可以将这两个属性放在一个类中，并根据用户是否滚动页面来打开/关闭它。

^{注意:代码段中的其他 div 和 body CSS 仅用于演示。}

.quarter-circle {
  position: fixed;
  top: 0px;
  right: 0px;
  height: 75px;
  width: 75px;
  line-height: 75px;
  text-align: center;
  background: yellowgreen;
  border-bottom-left-radius: 100%;
  border: 2px solid;
  font-size: 1.5rem;
  animation: shrink 2s ease infinite;
}
@keyframes shrink {
  to {
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
}
.some-content {
  min-height: 125vh;
  background: tomato;
}
body {
  margin: 0;
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='quarter-circle'><i class="fa fa-home fa-fw"></i>
</div>
<div class='some-content'></div>

---

正如您在上面的代码片段中注意到的那样，动画有点不稳定(动画结束时形状会颤抖)。这是因为我们正在为 height 和 width 属性设置动画，这两个属性都非常昂贵，因为它们会导致重新布局、重绘和合成。相反，我们可以使用 transform: scale 来实现类似以下代码片段的效果。

.quarter-circle {
  position: fixed;
  top: 0px;
  right: 0px;
  height: 75px;
  width: 75px;
  line-height: 75px;
  text-align: center;
  background: yellowgreen;
  border-bottom-left-radius: 100%;
  border: 2px solid;
  font-size: 1.5rem;
  animation: shrink 2s ease infinite;
  transform-origin: top right;
}
@keyframes shrink {
  to {
    transform: scale(.75);
  }
}
.some-content {
  min-height: 125vh;
  background: tomato;
}
body {
  margin: 0;
  padding: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='quarter-circle'><i class="fa fa-home fa-fw"></i>
</div>
<div class='some-content'></div>

使用 transform: scale 的一个缺点是形状内的图标或文本也会按比例缩小。这可能是也可能不是您想要的结果，因此请做出相应的选择。