怎么用css實(shí)現(xiàn)顏色扇

本篇內(nèi)容主要講解“怎么用css實(shí)現(xiàn)顏色扇”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么用css實(shí)現(xiàn)顏色扇”吧!

今天我們實(shí)現(xiàn)一個(gè)純css實(shí)現(xiàn)的顏色扇，繼續(xù)學(xué)習(xí)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,定義扇條數(shù)量
degreeOfFan,定義扇形角度
*/
$numOfItem:20;
$degreeOfFan:180deg;
body{
background-color: #000000;
}
/* 定義容器樣式，我們的hover事件將要添加在容器上，所以一定不能脫離標(biāo)準(zhǔn)流 */
#container{
width:580px;
height:300px;
position: relative;
}
/*
扇條的樣式
transform-origin非常重要，旋轉(zhuǎn)中心(應(yīng)該在.dot中心)
分別給不同的屬性定義不同的transition持續(xù)時(shí)間
*/
.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;
}
/*
設(shè)置扇條中的文字樣式，利用偽對(duì)象實(shí)現(xiàn)
*/
.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;
}
/* 旋轉(zhuǎn)中心的樣式 */
.dot{
position: absolute;
left:15px;
top:15px;
border-radius:15px;
height:10px;
width:10px;
background-color:#333333;
border:4px #777777 solid;
z-index:100;
}
/*
關(guān)鍵代碼----
通過循環(huán)給不同的扇條添加樣式
*/
@for $i from 1 through $numOfItem{
//通過循環(huán)給不同的扇條增加樣式
//z-index，改變疊放次序
//bgc,設(shè)置不同的顏色
//通過:after偽對(duì)象來放置顏色文本
.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%)}";
}
}
//通過循環(huán)給不同的扇條增加樣式
//hover之后，旋轉(zhuǎn)扇條
//當(dāng)旋轉(zhuǎn)角度超過角度之后，旋轉(zhuǎn)文字
#container:hover .item:nth-child(#{$i}){
transform:rotate($degreeOfFan*($i - $numOfItem)/$numOfItem);
&:after,&:before{
@if($degreeOfFan * ($i - $numOfItem)/$numOfItem < -90deg){
transform:rotate(180deg);
}}
}
}

完工，注釋比較完善，原理不再贅述。

到此，相信大家對(duì)“怎么用css實(shí)現(xiàn)顏色扇”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！