纯css实现的颜色扇附图

(编辑:jimmy 日期: 2024/10/31 浏览:2)

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

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事件将要添加在容器上,所以一定不能脱离标准流 */
#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);
}}
}
}

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

一句话新闻

高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。