SASS实现颜色卡动画

今天我们实现一个Sass实现颜色卡动画，继续学习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>

然后是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);
      }}
  }
}

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

===============================分割线，华丽的分割线======================================

为了增加交互，增加了单击扇条，改变网页背景颜色的交互。

html后面增加一个输出颜色的盒子

<!--
前面的代码
-->
<div id="color"></div>

css里面做些修改

/*页面背景的过渡效果*/
body{
  transition:all 2s;
}

/*设置颜色容器的样式*/
#color{
  margin: 50px 30px;
}
#color div{
  width:180px;
  height:60px;
  margin:10px 20px;
  line-height: 60px;
  text-align: center;
  border:1px dashed #000;
  float: left;
}

增加js，这里使用了jquery

 $('.item').click(function(){
    var color=$(this).css('background-color');
    $('body').css('background-color',color);
    var input="<div style='background:"+color+"'>"+color+"</div>";
    $('#color').append(input);
 });

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

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

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