WeUI框架
WeUI是一套小程序的UI框架，所謂UI框架就是一套界面設計方案，有了組件，我們可以用它來拼接出一個內容豐富的小程序，而有了UI框架，我們就可以讓我們的小程序變得更加美觀。
體驗WeUi小程序
WeUI是微信官方設計團隊的一套同微信原生視覺體驗一致的基礎樣式庫，在手機微信里搜索WeUI小程序即可。
下載源碼就可以看到weui-wxss-master文件夾，導入項目，體驗
為什么是weui-wxss-master下的dist⽂件夾，⽽不是weui-wxss-master？ 你還記得什么是⼩程序的根⽬錄嗎？
下載了WeUI的源代碼，其實WeUI的核⼼⽂件是weui.wxss。
如何在我們 的模板⼩程序⾥使⽤WeUI的樣式呢？
├── pages
├── image
├── style
│ ├── weui.wxss
├── app.js
├── app.json
├── app.wxss
把weui⼩程序dist/style⽬錄下的weui.wxss⽂件粘貼到style的⽂件夾⾥
@import 'style/weui.wxss';
Flex布局
布局也是⼀種樣式，也屬於css⽅⾯的知識哦
Flex是Flexible Box的縮寫，意為”彈性布局”
<view class="flex-box">
<view class='list-item'>Python</view>
<view class='list-item'>⼩程序</view>
<view class='list-item'>⽹站建設</view>
</view>
.list-item{
background-color: #82c2f7;
height: 100px;
text-align: center;
border:1px solid #bdd2f8;
}
讓組件變成左右關系
.flex-box{
display: flex;
}
讓組件的寬度均分
.list-item{
flex:1;
}
讓組件內的內容垂直居中
.list-item{
display: flex;
align-items:center;/*垂直居中*/
justify-content: center;/*⽔平居中*/
}
全局樣式與局部樣式
定義在 app.wxss 中的樣式為全局樣式，作⽤於每⼀個⻚⾯。
在 page 的 wxss ⽂件中定 義的樣式為局部樣式，只作⽤在對應的⻚⾯，並會覆蓋 app.wxss 中相同的選擇器。
漸變與動畫
CSS的漸變Gradient
linear-gradient() 函數⽤於創建⼀個表示兩種或多種顏⾊ 線性漸變的圖⽚。
在gradient.wxml⻚⾯輸⼊以下代碼：
<view class="gradient-display">
</view>
在gradient.wxss⾥輸⼊：
.gradient-display{
background-image:linear-gradient(red, blue);
width: 100vw;
height: 100vh;
}
它默認的漸變⽅向是從上到下
改變漸變的⽅向
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%位置是綠⾊漸變開始、最后以紅⾊結束
*/
Filter濾鏡
濾鏡filter屬性，可以對圖⽚進⾏⾼斯模糊、調整 對⽐度、轉換為灰度圖像、⾊相旋轉、圖⽚透明等操作。
⾼斯模糊blur，圖⽚變灰grayscale(%)，圖⽚透 明opacity(%)
.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%);
}
變形屬性Transform
CSS transform屬性能通過修改CSS視覺格式化模型的坐標空間旋轉、縮放、傾斜或平移給定 的組件。
變形Transform、過渡Transition、動畫Animation
.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 可以控制組件從⼀個屬性狀態切換為另外⼀個屬性狀態時的過渡效果。
.selector {
transition: [transition-property] [transition-duration] [transition-ti
ming-function] [transition-delay]; }
transition-property，應⽤過渡的 CSS 或動畫屬性的名稱；
transition-duration，整個過渡效果持續的時間
transition-timing-function，規定過渡效果的時間曲線
transition-delay，過渡效果延遲多久
動畫屬性Animation
CSS animations 使得可以將從⼀個CSS樣式配置轉換到另⼀個CSS樣式配置。動
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
} }
.fadeIn {
animation: 4s linear 0s infinite alternate fadeIn; }
抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉 （rotateIn/rotateOut）、淡⼊淡出（fadeIn/fadeOut）
若本號內容有做得不到位的地方（比如：涉及版權或其他問題），請及時聯系我們進行整改即可，會在第一時間進行處理。
請點贊！因為你們的贊同/鼓勵是我寫作的最大動力！
歡迎關注達達的簡書！
這是一個有質量，有態度的博客
