[css] 使用css3画一个扇形

四个半圆叠加，过半调整 z-index

.container {
width: 200px;
height: 200px;
position: relative;
border-radius: 100%;
}

div {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

.fan-1,
.fan-3 {
background: #CC9999;
}

.fan-2,
.fan-4 {
background: white;
}

.fan-1,
.fan-2 {
border-radius: 100px 0 0 100px;
transform-origin: 100% 50%;
z-index: 2;
}

.fan-3,
.fan-4 {
z-index: 1;
left: 50%;
border-radius: 0 100px 100px 0;
transform-origin: 0% 50%;
}

.fan-4 {
animation: rotate-2 2s linear both infinite;
}

.fan-2 {
animation: rotate-1 2s linear both infinite;
}

.fan-3 {
animation: zIndex 2s linear both infinite;
}

@keyframes zIndex {
from {
z-index: 1;
}

50% {
z-index: 1;
}

50.000001% {
z-index: 2;
}

to {
z-index: 2;
}
}

@keyframes rotate-1 {
from {
transform: rotate(0);
}

50% {
transform: rotate(0);
}

to {
transform: rotate(180deg);
}
}

@keyframes rotate-2 {
from {
transform: rotate(0);
}

50% {
transform: rotate(180deg);
}

to {
transform: rotate(180deg);
}
}

clip-path 切多边形， border-radius 裁剪

1 .sector { display: inline-block; margin: 20px; background: #CC9999; width: 100px; height: 100px; border-radius: 100%; animation: sector 4s linear both infinite; transform: rotate(45deg); }

@keyframes sector{
from {
clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
}
25% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
}
25.000001% {
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
}
50%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
}
50.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
}
75%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
75.000001%{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
}
to{
clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
}
}

静态：
先画一个圆，外加两个绝对定位的半圆
扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现
这只能切出180°以内的扇形
超过180°的扇形，就把圆作为底色，两个遮罩作为扇形的组成部分

想获得不同度数的扇形，改变 mask 样式里的度数即可。

1 2 3 4 5 .contain { position: relative; width: 200px; height: 200px; } .main { height: 100%; background: lightgreen; border-radius: 100px; } .common { position: absolute; top: 0; width: 50%; height: 100%; } .mask1 { transform: rotate(83deg); border-radius: 100px 0 0 100px; left: 0; transform-origin: right center; background: red; } .mask2 { transform: rotate(-76deg); transform-origin: left center; left: 100px; border-radius: 0 100px 100px 0; background: blue; } # 个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 使用css3画一个扇形相关推荐

[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
css如何调整红心样式_如何用html和CSS3画一个红心（爱心），初级简单代码实现...
html和css是可以画一个红心的,可能许多刚学习web前端的朋友不知道,我们现在演示一下,大家以后遇到类似的东西可以不用图片来做了,可以直接写代码,图片需要从服务器传递请求再回复请求,如果一个网页图 ...
HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
教你用CSS3画一个透视、旋转的正方体
教你用CSS3画一个透视.旋转的正方体正方体六个面,无非就是,将每个面进行translateZ提升/降低边长的一半,然后再进行rotate X/rotate Y (n*90deg)的旋转即可. ht ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
[css] 使用css3实现一个斑马线的效果
[css] 使用css3实现一个斑马线的效果 @ferrinweb 如果需要很多或者无限扩展的斑马线,你这个方案就有缺点了 @cxwht 你的方案需要增加额外的元素,不太理想最好的办法是用渐变背景实 ...
html实现画苹果,基于CSS3画一个iPhone
实现效果: 实现代码 html css3 html, body { height: 100%; } body { text-align: center; padding: 50px; backgrou ...
【CSS】画一个扇形
利用border属性画一个矩形 border: 200px solid red; 2.在矩形的基础上,画出三个等分的三角形,调整width border-left: 200px solid red; ...
vbs画动态爱心代码_前端必看之如何用CSS3画一个八卦和爱心
昨天雷雨交加,燥热有所缓解.今晨空气清新,再加上马上三天小长假,心情很不错,祝各位小长假玩的开心.那么,今天就用CSS3做些"不正紧"的事:画八卦和爱心. CSS3我们一般都是用来 ...

[css] 使用css3画一个扇形

[css] 使用css3画一个扇形

主目录

[css] 使用css3画一个扇形相关推荐

最新文章

热门文章