SVG解决方案

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效果。在下面的代码片段中，我使用动画来完成它，以便在代码段窗口中很容易看到它，但您可以将这两个属性放在一个类中，并根据用户是否滚动页面来打开/关闭它。

^{注意：代码段中的其他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形状的width属性 svg形状是使用path元素创建的。

在页面加载时添加了滚动触发器因此，在加载示例时，更改是imidiate。

添加了css转换，因此更改不是imidiate（更漂亮）。

＆＃13;

$(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();
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

右上角的四分之一圆

2 个答案:

SVG解决方案