右上角的四分之一圆 [英] Quarter-circle in top right corner

查看:39
本文介绍了右上角的四分之一圆的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我希望制作一个四分之一圆以放置在我网站的右上角(固定),并且我希望它在用户滚动时朝着其中心设置动画(我有用于缩小元素的代码,但不适用于元素本身或其中心)

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

HTML(脚本)

$(function(){无功收缩头 = 50;$(窗口).滚动(功能(){var scroll = getCurrentScroll();如果(滚动> =收缩标题){$('header').addClass('shrink');}别的 {$('header').removeClass('shrink');}});

当用户滚动时,收缩类应用于标题.等我弄明白了再改成四分之一圆.

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

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

解决方案

我希望制作一个四分之一圆以放置在我网站的右上角(固定)我希望它在用户滚动时朝着其中心动画

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

从以上来看,您似乎想知道如何创建四分之一圆并使其缩小(使其朝向自己的右上角).

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

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

注意:代码段中的其他 divbody CSS 仅用于演示.

.quarter-circle {位置:固定;顶部:0px;右:0px;高度:75px;宽度:75px;行高:75px;文本对齐:居中;背景:黄绿色;边框左下角半径:100%;边框:2px 实心;字体大小:1.5rem;动画:收缩2s缓动无限;}@keyframes 收缩 {到 {高度:50px;宽度:50px;行高:50px;}}.some-content {最小高度:125vh;背景:番茄;}身体 {边距:0;填充:0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class='四分之一圆'><i class="fa fa-home fa-fw"></i>

<div class='some-content'></div>

<小时>

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

.quarter-circle {位置:固定;顶部:0px;右:0px;高度:75px;宽度:75px;行高:75px;文本对齐:居中;背景:黄绿色;边框左下角半径:100%;边框:2px 实心;字体大小:1.5rem;动画:收缩2s缓动无限;变换原点:右上角;}@keyframes 收缩 {到 {变换:比例(.75);}}.some-content {最小高度:125vh;背景:番茄;}身体 {边距:0;填充:0;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css" rel="样式表"/><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script><div class='四分之一圆'><i class="fa fa-home fa-fw"></i>

<div class='some-content'></div>

使用transform: scale 的一个缺点是形状内的图标或文本也会被缩小.这对您来说可能是也可能不是理想的结果,因此请做出相应的选择.

I am looking to make a quarter-circle to place in the top right corner of my website (fixed) and I want it to animate towards its center when user scrolls ( I have the code working for shrinking the element but not for the element itself or its center)

I have the header shrinking with the following code:

HTML (script)

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

with the shrink class applied to the header when the user scrolls. I will switch it over to the quarter circle when I figure it out.

NOTE: It will be white filled with an icon in the middle (acting as my nav toggle button)

EDIT: 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)

解决方案

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)

Judging by the above, it seems like you want to know how to create a quarter-circle and also make it shrink (such that it goes towards its own top-right corner).

Creating a quarter-circle is simple and can be done with CSS itself. SVG is generally recommended for creating shapes but this is simple. All that is needed is to create a square and set it's bottom-left border radius as 100%. Positioning it (fixed) on the top right corner of the page is also very simple. Just add position: fixed with top and right as 0px.

Now for the shape to shrink, just change the height and width of the element to 0px and add to it a transition effect. In the below snippet, I have done it using an animation so that it is easily visible in the snippet window but you can put those two properties in a class and toggle it on/off depending on whether the user has scrolled the page or not.

Note: The other div and body CSS in the snippet are only for demo.

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


As you would have noticed in the above snippet, the animation is a bit jerky (the shape shivers when animation reaches its end). This is because we are animating the height and width properties both of which are super expensive because they result in a relayout, repaint and compositing. Instead, we can use transform: scale to achieve a similar effect like in the below snippet.

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

One drawback of using transform: scale is that the icon or text inside the shape will also get scaled down. This may or may not be a desirable outcome for you and hence choose accordingly.

这篇关于右上角的四分之一圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆