纯CSS实现颜色扇

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

在线研究点这里，下载收藏点这里。

ready？Gooo->

html文件

<div id="container">
    <div class="item it1" title="pick a color">
        <div class="dot"></div>
    </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 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>

/* 
变量声明
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);
      }}
  }
}

在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

纯CSS实现颜色扇,古老的榕树,5-wow.com