纯css完成的色调扇附图

2021-03-08 06:55 jianzhan
今日大家完成1个纯css完成的色调扇,再次学习培训sass的应用,实际效果见下图所示。
 

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>

随后是css文档,应用scss、prefire free和css reset。

拷贝编码
编码以下:

/*
自变量申明
numOfItem,界定扇条数量
degreeOfFan,界定扇形角度
*/
$numOfItem:20;
$degreeOfFan:180deg;
body{
background-color: #000000;
}
/* 界定器皿款式,大家的hover恶性事件即将加上在器皿上,因此1定不可以摆脱规范流 */
#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 < ⑼0deg){
transform:rotate(180deg);
}}
}
}

竣工,注解较为健全,基本原理已不赘述。