Quarter-circle 在右上角

Question

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

我用下面的代码 header 缩小了：

HTML（脚本）

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

在用户滚动时将收缩 class 应用于 header。等我弄明白了再换成四分之一圈。

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

编辑：我问的是如何制作一个 quarter-circle 位于屏幕右上角（固定）并且可以从右上角（圆圈的中心）动画化

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)

根据以上判断，您似乎想知道如何创建 quarter-circle 并使其缩小（使其朝向自己的 top-right 角）。

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

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

^{注意：片段中的其他 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 的一个缺点是形状内的图标或文本也会缩小。这可能是也可能不是您想要的结果，因此请做出相应的选择。

Answer 2

SVG 解决方案

我使用了您的代码（稍微修改了一下）来更改 svg 形状的宽度属性。
svg 形状是使用 path 元素创建的。

添加了页面加载时滚动的触发器。
以便在加载示例时立即更改。

添加了一个 css 过渡，这样变化就不会模仿（而且更漂亮）。

$(document).ready(function() {
  var svg = document.getElementById("slice");
  var shrinkHeader = 5;

  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= shrinkHeader) {
      svg.setAttribute('width', '200px');
    } else {
      svg.setAttribute('width', '100px');
    }
  });
  //Trigger scroll event
  $(window).scroll();
});

body {
  height: 300vh;
}
.header {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 200px;
}
.header svg {
  position: absolute;
  right: 5px;
  transition: width 2s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <svg id="slice" viewBox="0 0 100 100" width="200px">
    <path d="M5,5 95,5 95,95 Q 5,95 5,5" stroke="white" />
  </svg>
</div>
<p>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>text
  <br>
</p>

Quarter-circle 在右上角

Quarter-circle in top right corner

html

javascript

css

jquery

css-shapes

SVG 解决方案