|
思路：上述渐变技巧还有一个变种，可以用来创建弧形切角（很多人也把这种 效果称为“内凹圆角” ，因为它看起来就像是圆角的反向版本） 。唯一的区别 在于，我们会用径向渐变来替代上述线性渐变，代码如下：
html:
复制代码 代码如下:
<div>Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
css:
复制代码 代码如下:
.example3{
background: #8BC34A;
background: radial-gradient(circle at top left, transparent 15px, #8BC34A 0) top left,
radial-gradient(circle at top right, transparent 15px, #8BC34A 0) top right,
radial-gradient(circle at bottom right, transparent 15px, #8BC34A 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, #8BC34A 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
padding: 1em 1.2em;
max-width: 12em;
}
12、简单的饼图
思路：基于 transform 的解决方案：我们现在可以通过一个 rotate() 变形属性来让这个伪元素转起来。 如果我们要显示出 20% 的比率，我们可以指定旋转的值为 72deg （0.2 × 360 = 72） ，写成 .2turn 会更加直观一些。你还可以看到其 他一些旋转值的情况。
代码如下：
html:
复制代码 代码如下:
<div></div>
css：
复制代码 代码如下:
.pie{
width:140px;
height: 140px;
background: #8BC34A;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
transform: rotate(.1turn);/*10%*/
transform: rotate(.2turn);/*20%*/
transform: rotate(.3turn);/*30%*/
}
提示：在参数中规定角度。turn是圈，1turn = 360deg；另外还有弧度rad，2nrad = 1turn = 360deg。如，transform:rotate(2turn); //旋转两圈
此方法显示 0 到 50% 的比率时运作良好，但如果我们尝试显示 60% 的比率时（比如指定旋转值为 .6turn 时），会出现问题。解决方法：使 用上述技巧的一个反向版本来实现这个范围内的比率：设置一个棕色的伪 元素，让它在 0 至 .5turn 的范围内旋转。因此，要得到一个 60% 比率的饼 图，
伪元素的代码可能是这样的：
html:
复制代码 代码如下:
<div></div>
css:
复制代码 代码如下:
.pie2{
width:140px;
height: 140px;
background: #8BC34A;
border-radius: 50%;
background-image: linear-gradient(to right,transparent 50%,#655 0);
}
.pie2::before{
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: #655;/*当范围大于50%时,需要改变伪元素的背景颜色为#655;*/
transform-origin: left;
transform: rotate(.1turn);
}
用 CSS 动画来实现一个饼图从 0 变化到 100% 的动画，从而得到一个炫酷的进度指示器：
代码如下：
html:
复制代码 代码如下:
<div></div>
css:
复制代码 代码如下:
.pie3 {
width:140px;
height: 140px;
border-radius: 50%;
background: yellowgreen;
background-image: linear-gradient(to right, transparent 50%, currentColor 0);
color: #655;
}</p>
<p>.pie3::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
}</p>
<p>@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: currentColor; }
}
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
