个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
有没有办法让这样的东西流动起来，让它随着父级一起扩展，或者实现它需要什么..
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
.dimmensions2 {
width: 113px;
height: 113px;
}
.dimmensions3 {
width: 105px;
height: 105px;
}
.left {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #09f;
float: left;
height: 199.5px;
top: 0;
}
.left-inner {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #444;
height: 175px;
width: 90px;
top: 12px;
left: 15px;
}
.left-inner-small {
position: relative;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
background: #4cff00;
height: 145px;
width: 85px;
top: 15px;
left: 15px;
}
.top-right {
position: relative;
border-top-right-radius: 100px;
background: #666;
float: right;
}
.top-right-inner {
position: relative;
border-top-right-radius: 100px;
background: #ffd800;
float: right;
height: 90px;
width: 85px;
top: 12px;
right: 15px;
}
.top-right-inner-small {
position: relative;
border-top-right-radius: 100px;
background: #808080;
float: right;
height: 75px;
width: 70px;
top: 15px;
right: 15px;
}
.bottom-right {
position: relative;
border-bottom-right-radius: 100px;
background: #333;
float: right;
}
.bottom-right-inner {
position: relative;
border-bottom-right-radius: 100px;
background: #ff6a00;
float: right;
height: 87px;
width: 85px;
top: 0px;
right: 15px;
}
.bottom-right-inner-small {
position: relative;
border-bottom-right-radius: 100px;
background: #fff;
float: right;
height: 72px;
width: 70px;
top: 0px;
right: 15px;
}
.center-small {
position: absolute;
border-radius: 125px;
background: #ff6a36;
top: 44px;
left: 44px;
z-index: 999;
}
.center-small-inner {
position: absolute;
border-radius: 125px;
background: #333;
top: 4px;
left: 4px;
z-index: 9999;
}
.center-text {
z-index: 99999;
position: absolute;
text-shadow: #000 0px 2px 1px;
color: #555;
font-size: 18px;
top: -12px;
left: -47px;
font-family: 'Impact';
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="circle-container">
<div class="dimmensions2 center-small">
<div class="dimmensions3 center-small-inner"></div>
</div>
<div class="dimmensions left">
<div class="dimmensions left-inner">
<div class="dimmensions left-inner-small"></div>
</div>
</div>
<div class="dimmensions top-right">
<div class="dimmensions top-right-inner">
<div class="dimmensions top-right-inner-small"></div>
</div>
</div>
<div class="dimmensions bottom-right">
<div class="dimmensions bottom-right-inner">
<div class="dimmensions bottom-right-inner-small">
<span class="center-text">
CSS3<span style="color:#ffd800">+</span>HTML5
</span>
</div>
</div>
</div>
</div>
</body>
</html>
最佳答案
每个元素都从属于#circle-container。您已经在所有元素中定义了固定宽度和高度。您可以将这些值计算为与 #circle-container 的实际 200px 宽度和高度成比例的值，并将其更改为百分比结果。
例子:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 100px;
height: 100px;
}
会变成:
#circle-container {
position: relative;
width: 200px;
height: 200px;
border: solid 0px #333;
}
.dimmensions {
width: 50%; //Proportional
height: 50%; //Proportional
}
然后，调整 #circle-container 的大小将调整整个圆弧的大小。
关于CSS3 流体弧 + 一些文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23792327/
25
4
0
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 9 年前。 Improve this q
半径为r的圆上的点p(x,y)与圆心O(x0，y0)的关系: x = x0+rcosA; y = y0+rsinA ，A为弧度 1、圆 复制代码 代码如下:
我正在尝试找到一种方法来计算两条弧线之间的交点。我需要用它来确定在视觉上圆弧的右半边有多少，左边有多少。我考虑创建右半部分的弧线，并将其与实际弧线相交。但是我花了很多时间来解决这个问题，所以我想在这里
这听起来可能是一个新手问题，但我是 iOS 开发新手。 我在我的项目中跟踪了代码，该项目启用了 ARC，但我在执行时遇到错误(访问错误)，并且想了解问题的原因并解决它。 按下某些按钮后，将在 MTCl
我想使用圆弧连接两个 SVG 点(例如两个圆的中心)。如果只有一个连接，则线 ( ) 将是一条直线。如果有两个连接，则两者都将是圆形的并且是对称的，这样: 所以，事实上，有一些规则: 一切都应该与连
我正在尝试实现多级饼图 我的初始代码在这里:JSFIDDLE var departments = [ { "name": "Sales", "color": "green",
我想在我的布局中制作一个弧形 View ，我尝试使用一个库但它不能正常工作，我如何制作这样的拱形 View 并在其上附加一个按钮，例如: 我尝试了一些代码，但它们在平板电脑和不同尺寸的屏幕上无法正常显
我有点 X 和 A, A',... 坐标: X [x,y](是起点) A [a,b], A'[a',b']等(是终点) 我还知道 Angular XCA、XCA'等 我找不到计算弧的公式，类似于图片上
我有一个 ViewController，它从 CoreData 获取对象并用它们构建一个 UITableView。当用户按下一行时，我得到报告文学对象并使用以下方法将其传递给下一个 View Cont
我有一个带有弧形的 Canvas ，里面有一些标签。 这是 fiddle 链接 - Fiddle下面是代码: var canvas = document.getElementById("myC
如何使用 css 创建这样的 Angular 弧？ 这是入门模板:https://codepen.io/anon/pen/rwraXG 我希望我能够使用黑色外部 div 和红色内部 div，并使用边框
只是想完全理解 ARC。 MyView *testView = [[MyView alloc] init]; __weak MyView *weakView = testView; [weakView
假设我有一条线，我想为这条线设置动画，首先线是隐藏的，经过一点一点的线出现并完成后，我的问题是在 Android 中可以做到这一点还是我必须使用 Adobe After Effect？ 更新 :
更新:2013 年 11 月 20 日:此问题仍未解决。 我正在尝试在自定义 View 中以动画方式创建圆圈。我想制作圆周的动画 - 在动画开始时有一个圆弧，在动画结束时圆是完整的。 我按照这个答案成
This is a basic code to create a pie chart for protocol distribution. In my .csv file, I have two co
我有一个 NSArray 对象，在我的 UIViewController 中使用。我可以将其声明为 ivar 或属性。这两种方法都有什么优点(考虑到我使用的是 ARC)？ 选项 1: @interfa
此刻 Canvas 以不同的速度和大小绘制 15 个从 ltr 移动的圆圈。当其中一个离开窗口时，它将被设置为开始。问题是 Canvas 在圆圈之间画线，我不知道为什么？有人可以帮忙吗？ window
我最近在这里和其他网站上阅读了很多关于 IBOutlets 应该强还是弱的文章。官方判定它们应该是弱的，除非它们引用顶级 xib 对象。 这很好。 然而，我还不清楚为什么将它们设置为强或弱实际上会对应
我有一个 CIImage，我正试图在鼠标沿路径拖动时画线。我可以这样做吗？ 我正在为 mac 构建一个应用程序，我是 Core Image 的新手。 最佳答案 您需要先创建一个图形上下文，然后从中检索
我有一个使用 CAShapeLayer 绘制的圆弧，我希望它围绕圆的中心旋转。我正在尝试使用“transform.rotation”属性上的 CABasicAnimation 来获取此动画。但是旋转似
我是一名优秀的程序员,十分优秀！