paip.java win程序迁移linux的最佳实践

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

paip.java win程序迁移linux的最佳实践

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

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>
然后是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);
      }}
  }
}
完工,注释比较完善,原理不再赘述。

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

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

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

paip.java win程序迁移linux的最佳实践,布布扣,bubuko.com

paip.java win程序迁移linux的最佳实践

上一篇:去除java list 中的 [] 括号


下一篇:全面介绍Windows内存管理机制及C++内存分配实例(四):内存映射文件