右上角的四分之一圆

Question

我希望在我的网站右上角制作一个四分之一圆（已修复），并且我希望它在用户滚动时向其中心设置动画（我的代码用于缩小元素但不适用于元素本身或其中心）

我使用以下代码缩小了标题：

HTML（脚本）

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

当用户滚动时将收缩类应用于标题。等我弄明白了再换成四分之一圈。

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

编辑：我在问如何制作一个位于屏幕右上角的四分之一圆（固定），并且可以从右上角（圆的中心）进行动画处理

Answer 1

我希望在我的网站右上角制作一个四分之一圆（已修复）我希望它在用户滚动时向其中心设置动画

我在问如何制作一个位于屏幕右上角的四分之一圆（固定）并且可以从右上角（圆的中心）进行动画处理

从上述情况来看，您似乎想知道如何创建一个四分之一圆并使其缩小（使其朝向自己的右上角）。

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

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

^{注意： sn-p 中的其他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>

---

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

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