SASS实现颜色卡动画

古城微笑少年丶 2022-08-26 00:57 167阅读 0赞

今天我们实现一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

ready？Gooo->

html文件

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

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

\---------------------------------------------------------------

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

[SouthEast]: /images/20220824/c891d4b4a66f4edba0da3a0ad47715ef.png
[Link 1]: http://codepen.io/whqet/pen/Inmhd/
[Link 2]: http://codepen.io/whqet/share/zip/Inmhd/
[whqet]: http://blog.csdn.net/whqet