我希望将四分之一圆放置在我的网站的右上角（固定），并且当用户滚动时，我希望它向其中心移动（我有代码可以缩小元素，但不能缩小元素本身或其中心）
我使用以下代码缩小标题：
HTML（脚本）
$(function(){
var shrinkHeader = 50;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if ( scroll >= shrinkHeader ) {
$('header').addClass('shrink');
}
else {
$('header').removeClass('shrink');
}
});
当用户滚动时，将收缩类应用于标题。当我弄清楚时，将其切换到四分之一圈。
注意：它将变成白色，中间带有一个图标（充当我的导航切换按钮）
编辑：我在问如何制作位于屏幕右上方的四分之一圆（固定），并可以从右上角（圆的中心）进行动画处理
最佳答案
我正在寻找一个四分之一圆放置在我的网站的右上角（固定），我希望它在用户滚动时朝其中心移动
我在问如何制作位于屏幕右上方的四分之一圆（固定），并可以从右上角（圆的中心）对其进行动画处理
从上面的判断来看，您似乎想知道如何创建四分之一圆并缩小它（以使其朝着自己的右上角）。
创建一个四分之一圆很简单，可以使用CSS本身完成。通常建议使用SVG创建形状，但这很简单。所有需要做的就是创建一个正方形并将其左下边界半径设置为100％。将其定位（固定）在页面的右上角也非常简单。只需将position: fixed与top和right添加为0px。
现在要缩小形状，只需将元素的height和width更改为0px并为其添加transition效果。在下面的代码段中，我使用动画完成了此操作，以便可以在代码段窗口中轻松看到它，但是您可以将这两个属性放在一个类中，然后根据用户是否滚动页面来启用/禁用该属性。
注意：片段中的其他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的一个缺点是形状内的图标或文本也将按比例缩小。这可能对您而言不是理想的结果，因此请相应选择。