今天我们实现一个纯css实现的颜色扇，继续学习sass的使用，效果见下图所示。

html文件

复制代码代码如下:

然后是css文件，使用scss、prefire free和css reset。

复制代码代码如下:

/*

变量声明

numOfItem,定义扇条数量

degreeOfFan,定义扇形角度

*/

$numOfItem:20;

$degreeOfFan:180deg;

body{

background-color: #000000;

}

/* 定义容器样式，我们的hover事件将要添加在容器上，所以一定不能脱离标准流 */

#container{

width:580px;

height:300px;

position: relative;

}

/*

扇条的样式

transform-origin非常重要，旋转中心(应该在.dot中心)

分别给不同的属性定义不同的transition持续时间

*/

.item{

position: absolute;

left:50%;

top:100%;

width:300px;

height:40px;

border-radius:10px 10px 20px 10px;

transition:all .5s,transform 1s ease-in,;

transform-origin:22px 22px;

}

/* 扇条hover样式 */

.item:hover{

width:336px;

border-radius:10px 10px 10px 10px;

cursor: pointer;

}

/*

设置扇条中的文字样式，利用伪对象实现

*/

.item:after{

position: absolute;

right:10px;

top:0;

line-height: 40px;

color:#FFF;

}

.item:nth-child(1):before{

content:attr(title);

position: absolute;

right:90px;

top:0;

line-height: 40px;

color:#FFF;

}

/* 旋转中心的样式 */

.dot{

position: absolute;

left:15px;

top:15px;

border-radius:15px;

height:10px;

width:10px;

background-color:#333333;

border:4px #777777 solid;

z-index:100;

}

/*

关键代码----

通过循环给不同的扇条添加样式

*/

@for $i from 1 through $numOfItem{

//通过循环给不同的扇条增加样式

//z-index，改变叠放次序

//bgc,设置不同的颜色

//通过:after伪对象来放置颜色文本

.item:nth-child(#{$i}){

z-index:100-$i;

background-color: hsl(360*($numOfItem - $i)/($numOfItem - 1),50%,50%);

&:after{

content:"#{hsl(360*($numOfItem - $i)/($numOfItem - 1),50%,50%)}";

}

}

//通过循环给不同的扇条增加样式

//hover之后，旋转扇条

//当旋转角度超过角度之后，旋转文字

#container:hover .item:nth-child(#{$i}){

transform:rotate($degreeOfFan*($i - $numOfItem)/$numOfItem);

&:after,&:before{

@if($degreeOfFan * ($i - $numOfItem)/$numOfItem < -90deg){

transform:rotate(180deg);

}}

}

}

完工，注释比较完善，原理不再赘述。