-

CSS是编程科技与设计艺术结合得最为完美的一项技术，编程的优雅在于代码的清晰可读，而设计的优雅在于能够结合技术为用户带来一场视觉和交互的盛宴。借助于CSS，不仅可以做出平面设计师常用的滤镜、渐变等设计效果，还可以设计出一些交互动画，增强用户的体验。

CSS的渐变Gradient

颜色渐变是设计师必不可少的，CSS linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

技术文档：CSS 渐变属性linear-gradient

使用开发者工具新建一个gradient的页面，然后在gradient.wxml页面输入以下代码：

<view class="gradient-display">
    </view>

在gradient.wxss里输入：

.gradient-display{
      background-image:linear-gradient(red, blue);
      width: 100vw;
      height: 100vh;
      }

  
.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }

我们发现因为背景图片使用了linear-gradient属性，它默认的渐变方向是从上到下，第一个颜色（这里为红色red）是起始颜色，第二个颜色（这里为蓝色blue）为停止颜色。

将.gradient-display里的backgound-image的值依次换成以下：

改变渐变的方向
background-image: linear-gradient(45deg, blue, red);
    /* 渐变轴为45度，从蓝色渐变到红色 */

也可以这样写，代码具体含义可以去参考技术文档了解

background-image:linear-gradient(to left top, blue, red);
    /* 从右下到左上、从蓝色渐变到红色 */

增加更多颜色变换

background-image:linear-gradient(0deg, blue, green 40%, red);
    /* 从下到上（渐变轴为0度），从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */

颜色百分比

background-image: linear-gradient(19deg, rgb(33, 212, 253) 0%, rgb(183, 33, 255) 100%);

> 小任务：参考径向渐变技术文档下面的examples，在小程序里实现一个径向渐变的案例。通过实战的方式，理解技术文档就像辞典，前期学习不必做到全部看懂，能够拿来用就行。

Filter滤镜

滤镜对于设计师来说一定不会陌生，CSS也有滤镜filter属性，可以对图片进行高斯模糊、调整对比度、转换为灰度图像、色相旋转、图片透明等操作。

> 相比于Photoshop等工具的滤镜效果来说，使用CSS可以批量化处理图片滤镜效果，而且通过编程的手段不仅可以叠加各种效果，而且还能与交互相结合。

这里我们主要介绍用的最多的三个滤镜效果，高斯模糊blur，图片变灰grayscale(%)，图片透明opacity(%)，其他滤镜效果大家以后可以阅读技术文档。

技术文档：滤镜属性

使用开发者工具新建一个filter页面，然后在filter.wxml输入：

<view class="filter-display">
        <view>blur高斯模糊</view>
        <image class="blur" mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png"></image>
        <view>grayscale图片变灰</view>
        <image class="grayscale" mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png"></image>
        <view>opacity图片透明</view>
        <image class="opacity" mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png"></image>
        <view>多个滤镜叠加，注意css的写法即可</view>
        <image class="multiple" mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png"></image>
    </view>

然后在filter.wxss里输入：

    .filter-display img{
            width: 150px;height: auto;
        }
        .blur{
            filter: blur(8px);
        }
        .grayscale{
            filter: grayscale(90%);
        }
        .opacity{
            filter: opacity(25%);
        }
        .multiple{
            filter: blur(8px) grayscale(90%) opacity(25%);
        }

图片由灰色变为彩色

在实际应用中，会在网站上添加很多不同色系的图片，比如合作伙伴的logo、嘉宾的照片、新闻图片等，为了让照片和网站的色系保持一致，因此就需要对所有图片进行统一的滤镜处理，而将图片变灰是比较常见的一种做法。

有时我们还会给这些变灰的图片添加一个交互特效，那就是当鼠标悬停在图片上时，图片会由灰色变为彩色。

在filter.wxml输入如下代码:

<view class="filter-display">
        <text>将鼠标悬停（模拟器）或手指（手机微信）按住或放开图片查看效果</text>
        <view class="grayscale" hover-class="grayscale-hover" >
          <image mode="widthFix"  src="//7n./attachments/knowledge/202006/77455.png"></image>
        </view>
    </view>

在技术文档view组件，我们可以看到hover-class是指定按下去的样式类。

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

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

高斯模糊的背景

高斯模糊是UI设计师经常用到的一个特效。平面设计师通常是人工、手动去给图片设计样式，而UI设计师则可以结合CSS给相同类别的所有图片添加统一的样式，比如我们希望每个用户信息页的背景、每篇文章顶部的背景都不一样。

在filter.wxml输入如下代码:

<view class="userinfo-display">
        <view class="blur-bg"></view>
        <view class="user-img">
            <image src="//7n./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设计师在处理网页元素的设计时，不会像平面设计师一样可以对每个元素都差异化的精心雕琢，毕竟CSS是没法做到像Photoshop等设计工具那样复杂，但是他可以做到批量。所以相对于平面设计师而言，UI设计师更注重单调且统一。

变形属性Transform

CSS transform属性能通过修改CSS视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定的组件。

> 关于变形Transform、过渡Transition、动画Animation的技术文档，大家先不要急着钻研，粗略浏览一下即可，以后有时间再来研究。

技术文档：CSS 变形属性transform

使用微信开发者工具新建一个transform页面，在transform.wxml里输入以下代码

<view class="transform-display">
        <view>缩放,scale(x,y)，x为长度缩放倍数，y为宽度缩放倍数，如果只有一个值，则是长和宽缩放的倍数</view>
        <image class="scale"  mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png" ></image>
        <view>平移,translate(x,y)，x为x轴平移的距离，y为y轴平移的距离，如果只有一个值，则是x和y轴缩放的距离，值可以为负数</view>
        <image class="translate" mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png" ></image>
       <view>旋转,rotate()里的值为旋转的角度</view>
       <image class="rotate"  mode="widthFix" src="//7n./attachments/knowledge/202006/77455.png" ></image>
       <view>倾斜,skew()里的值为旋转的角度</view>
       <image class="skew"  mode="widthFix" src="//7n./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 可以控制组件从一个属性状态切换为另外一个属性状态时的过渡效果。

技术文档：CSS 过渡属性Transition

建议大家只用简写属性transition，多个属性连着一起写会更好一些，transition的语法如下，语法比较复杂，大家可以结合后面的实际案例

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

  • transition-property，应用过渡的 CSS 或动画属性的名称；
  • transition-duration，整个过渡效果持续的时间，默认时间为0秒，所以要有过渡效果这个是必须定义的；
    • transition-timing-function，规定过渡效果的时间曲线，默认为ease；
    • transition-delay，过渡效果延迟多久，或者说何时开始，默认为0秒，不定义的话也就是直接开始；

背景颜色的变化

同样还是把下面的代码输入到小程序的页面当中，通过实战的方式来查看效果。

使用开发者工具新建一个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;
    }

动画是需要触发的，这里我们使用的是悬停hover-class来触发效果，把鼠标放在元素上8秒以上，看一下正方形的背景颜色有什么变化。

了解了效果之后，我们再来结合实际案例理解语法：

  • 因为我们是用hover来触发的，所以transition要写在元素的hover-class里，盒子之前的背景是绿色green，悬停的背景是黄色yellow；
  • 因为我们改变的是盒子background-color，所以transition需要过渡的CSS属性名称，就是background-color；
  • 动画过渡持续的时间，我们设置的是5秒，也就是背景由绿色变为黄色的时间；
  • 这里的ease-out（慢速结束）是颜色过渡的时间曲线效果。还可以有linear（匀速）、ease-in（慢速开始）、ease-in-out（慢速开始和慢速结束）。持续的时间很短的情况下，这几个时间曲线效果差别是及其细微的，需要设计师对动画足够敏感了。
  • 动画延迟的时间是3秒，也就是说3秒之后动画才开始。

技术文档：可设置动画的属性列表

我们来查看一个综合案例，在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样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。

技术文档：CSS动画属性Animation

<view class="fadeIn">
     <view>注意会有一个无限颜色渐变变化的动画</view>
        <image mode="widthFix" src="//7n./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文件，就能够给指定的元素添加动画样式。

技术文档：Animate.css

它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 80种动画效果，几乎包含了所有常见的动画效果。

> 小任务：参考Animate.css的shake抖动，在小程序实现一个组件抖动的案例。除了引入一些weui这样的样式框架，还有一些开源的库我们也可以学习和借鉴，更多内容则需要大家以后可以深入学习了。

© 2023 mianshi8.net MIT license