先上效果图，如图所示：
最终效果
第一步：画个父容器+12个子容器（扇叶）
将父容器居中，子容器使用absolute定位，基本代码如下：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
body { display: flex; height: 95vh; align-items: center; justify-content: center;
} .container { position: relative; width: 150px; height: 150px; background-color: #008B64;
} .item { position: absolute; top: 0px; left: 0px; width: 150px; height: 80px; background-color: #A52A2A;
} </style>
</head>
<body>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body></html>效果如图：
初始页面
第二步：将子容器改成等边三角形
可以通过border来实现三角形的效果，border-left设置为none，border-top和boder-bottom设置宽度为40px并透明，border-right宽度设置为150px，同时我们需要将本身的width和height设置为0，background-color去掉。
以下css只显示修改或者新增的属性：
.item {
width: 0px; height: 0px; border: 40px solid transparent; border-left-width: 0px; border-right: 150px solid #A52A2A;
}效果如图所示
利用border实现三角形
第三步：将三角形的顶点对准父容器中心
可以通过left和top进行定位，这里使用了calc函数，当然，也可以在纸上计算出具体值填上来。
.item { top: calc(50% - 40px); left: 50%;
}效果如下：
将三角形顶点对准父容器中心
第四步：将子容器的变换原点设置到三角形的顶点，并通过JavaScript将子容器围绕原点旋转一周
transfrom-origin设置三角形的变换原点到顶点的，使用jQuery逐个旋转三角形，每个相差30度。
<style>.item { transform-origin: 0px 50%;
}</style><script type="text/javascript">
$(function(){
$('.item').each(function(index,item){
$(item).css('transform','rotateZ('+ (index * 30) +'deg)');
});
});</script>效果如下：
旋转三角形，围成一圈
到这一步，核心的技巧已经介绍完了，下面只是做些界面上的优化。
第四步: 子容器单双采用不同的颜色
.item:nth-child(odd){ border-right-color: cornflowerblue;
}.item:nth-child(even){ border-right-color: #A52A2A;
}
单双变色
第五步：使用keyframe让大转盘旋转
.container { animation: run-rotate 3s ease-out infinite;
}
@keyframes run-rotate{ from { transform: rotateZ(0deg);
} to { transform: rotateZ(calc(360deg * 3));
}
}最终效果如下：
作者：农场主的鸡
链接：https://www.jianshu.com/p/d6dc2313ad23
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦