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前端開發技術，分享網頁相關資源。
---------------------------------------------------------------