在實際應用中，會在網(wǎng)站上添加很多不同色系的圖片，比如合作伙伴的logo、嘉賓的照片、新聞圖片等，為了讓照片和網(wǎng)站的色系保持一致，因此就需要對所有圖片進行統(tǒng)一的濾鏡處理，而將圖片變灰是比較常見的一種做法。

有時我們還會給這些變灰的圖片添加一個交互特效，那就是當鼠標懸停在圖片上時，圖片會由灰色變?yōu)椴噬?/p>

在filter.wxml輸入如下代碼:

<view class="filter-display">
        <text>將鼠標懸停（模擬器）或手指（手機微信）按住或放開圖片查看效果</text>
        <view class="grayscale" hover-class="grayscale-hover" >
          <image mode="widthFix"  src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

在技術(shù)文檔view組件，我們可以看到hover-class是指定按下去的樣式類。

在filter.wxss里添加如下樣式：

.filter-display image{
      width: 150px;height: auto;
    }
    .grayscale{
      filter: grayscale(90%);
    }
    .grayscale-hover{
      filter:grayscale(0);
    }

高斯模糊的背景

高斯模糊是UI設(shè)計師經(jīng)常用到的一個特效。平面設(shè)計師通常是人工、手動去給圖片設(shè)計樣式，而UI設(shè)計師則可以結(jié)合CSS給相同類別的所有圖片添加統(tǒng)一的樣式，比如我們希望每個用戶信息頁的背景、每篇文章頂部的背景都不一樣。

在filter.wxml輸入如下代碼:

<view class="userinfo-display">
        <view class="blur-bg"></view>
        <view class="user-img">
            <image src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

在filter.wxss里添加如下樣式：

.blur-bg {
        width: 750rpx;height: 300rpx;overflow: hidden;
        background: url(https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/blurimg.jpg);
        background-size: cover;
        position: fixed;
        filter: blur(15px);
        z-index: -1;   
    }
    .user-img{
        width: 750rpx;height: 300rpx;
        display: flex;
        justify-content: center; 
        align-items:center;   
    }
    .user-img image {
      width: 80rpx;height: 80rpx;
      border-radius: 100%;
      }

UI設(shè)計師在處理網(wǎng)頁元素的設(shè)計時，不會像平面設(shè)計師一樣可以對每個元素都差異化的精心雕琢，畢竟CSS是沒法做到像Photoshop等設(shè)計工具那樣復雜，但是他可以做到批量。所以相對于平面設(shè)計師而言，UI設(shè)計師更注重單調(diào)且統(tǒng)一。

變形屬性Transform

CSS transform屬性能通過修改CSS視覺格式化模型的坐標空間旋轉(zhuǎn)、縮放、傾斜或平移給定的組件。

關(guān)于變形Transform、過渡Transition、動畫Animation的技術(shù)文檔，大家先不要急著鉆研，粗略瀏覽一下即可，以后有時間再來研究。

技術(shù)文檔：CSS 變形屬性transform

使用微信開發(fā)者工具新建一個transform頁面，在transform.wxml里輸入以下代碼

<view class="transform-display">
        <view>縮放,scale(x,y)，x為長度縮放倍數(shù)，y為寬度縮放倍數(shù)，如果只有一個值，則是長和寬縮放的倍數(shù)</view>
        <image class="scale"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
        <view>平移,translate(x,y)，x為x軸平移的距離，y為y軸平移的距離，如果只有一個值，則是x和y軸縮放的距離，值可以為負數(shù)</view>
        <image class="translate" mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>旋轉(zhuǎn),rotate()里的值為旋轉(zhuǎn)的角度</view>
       <image class="rotate"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
       <view>傾斜,skew()里的值為旋轉(zhuǎn)的角度</view>
       <image class="skew"  mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

在transform.wxss文件里添加如下樣式：

.transform-display image{
      width: 80px;height: 80px;
      }
    .scale{
        transform: scale(1,0.5);
    }
    .translate{
        transform: translate(500px,20px);
    }
    .rotate{
        transform: rotate(45deg);
    }
    .skew{
        transform: skew(120deg);
    }

過渡屬性Transition

CSS transitions 可以控制組件從一個屬性狀態(tài)切換為另外一個屬性狀態(tài)時的過渡效果。

技術(shù)文檔：CSS 過渡屬性Transition

建議大家只用簡寫屬性transition，多個屬性連著一起寫會更好一些，transition的語法如下，語法比較復雜，大家可以結(jié)合后面的實際案例

.selector {
        transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
    }

• transition-property，應用過渡的 CSS 或動畫屬性的名稱；
• transition-duration，整個過渡效果持續(xù)的時間，默認時間為0秒，所以要有過渡效果這個是必須定義的；
  • transition-timing-function，規(guī)定過渡效果的時間曲線，默認為ease；
  • transition-delay，過渡效果延遲多久，或者說何時開始，默認為0秒，不定義的話也就是直接開始；

背景顏色的變化

同樣還是把下面的代碼輸入到小程序的頁面當中，通過實戰(zhàn)的方式來查看效果。

使用開發(fā)者工具新建一個transition頁面，然后在transition.wxml頁面里面輸入以下代碼：

<view class="transition-display">
        <view class="box bg-color" hover-class="bg-color-hover"></view>
    </view>

然后在transition.wxss里面輸入：

.box{width: 150px;height: 150px;cursor: pointer;}
    .bg-color{
        background-color:green;
    }
    .bg-color-hover{
        background-color: yellow;
        transition: background-color 5s ease-out 3s;
    }

動畫是需要觸發(fā)的，這里我們使用的是懸停hover-class來觸發(fā)效果，把鼠標放在元素上8秒以上，看一下正方形的背景顏色有什么變化。

了解了效果之后，我們再來結(jié)合實際案例理解語法：

• 因為我們是用hover來觸發(fā)的，所以transition要寫在元素的hover-class里，盒子之前的背景是綠色green，懸停的背景是黃色yellow；
• 因為我們改變的是盒子background-color，所以transition需要過渡的CSS屬性名稱，就是background-color；
• 動畫過渡持續(xù)的時間，我們設(shè)置的是5秒，也就是背景由綠色變?yōu)辄S色的時間；
• 這里的ease-out（慢速結(jié)束）是顏色過渡的時間曲線效果。還可以有l(wèi)inear（勻速）、ease-in（慢速開始）、ease-in-out（慢速開始和慢速結(jié)束）。持續(xù)的時間很短的情況下，這幾個時間曲線效果差別是及其細微的，需要設(shè)計師對動畫足夠敏感了。
• 動畫延遲的時間是3秒，也就是說3秒之后動畫才開始。

技術(shù)文檔：可設(shè)置動畫的屬性列表

我們來查看一個綜合案例，在transition.wxml里輸入

<view>
        <text>盒子的多個屬性一起動畫: width, height, background-color, transform. 將鼠標或手指懸停在盒子上查看動畫之后放開。</text>
        <view class="animatebox" hover-class="animatebox-hover"></view>
    </view>

在transition.wxss里輸入

.animatebox {
        display: block;
        width: 100px;
        height: 100px;
        background-color: #4a9d64;
        transition:width 2s, height 2s, background-color 2s, transform 2s;
    }
    .animatebox-hover {
        background-color: #cd584a;
        width:200px;
        height:200px;
        transform:rotate(180deg);
    }

動畫屬性Animation

CSS animations 使得可以將從一個CSS樣式配置轉(zhuǎn)換到另一個CSS樣式配置。動畫包括兩個部分:描述動畫的樣式規(guī)則和用于指定動畫開始、結(jié)束以及中間點樣式的關(guān)鍵幀。

技術(shù)文檔：CSS動畫屬性Animation

<view class="fadeIn">
     <view>注意會有一個無限顏色漸變變化的動畫</view>
        <image mode="widthFix" src="http://7n.w3cschool.cn/attachments/knowledge/202006/77455.png" ></image>
    </view>

在wxss里輸入以下代碼

@keyframes fadeIn {
      from {
        opacity: 0;
      }

    
      to {
        opacity: 1;
      }
    }

    
    .fadeIn {
      animation: 4s linear 0s infinite alternate fadeIn;
    }

CSS3 動畫庫 Animate.css

Animate.css是一個有趣的，跨瀏覽器的css3動畫庫，只需要你引入一個CSS文件，就能夠給指定的元素添加動畫樣式。

技術(shù)文檔：Animate.css

它預設(shè)了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉(zhuǎn)（flip）、旋轉(zhuǎn)（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 80種動畫效果，幾乎包含了所有常見的動畫效果。

小任務(wù)：參考Animate.css的shake抖動，在小程序?qū)崿F(xiàn)一個組件抖動的案例。除了引入一些weui這樣的樣式框架，還有一些開源的庫我們也可以學習和借鑒，更多內(nèi)容則需要大家以后可以深入學習了。