WeUI框架WeUI是一套小程序的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。将wxss文件粘贴到样式文件夹@import'style/weui.wxss'；flex布局也是一种样式，也属于css知识。Flex是FlexibleBox的缩写，意思是“弹性布局”PythonApplet网站建设.list-item{background-color:#82c2f7;高度：100px；文本对齐：居中；边框：1px实心#bdd2f8；}让组件变成左右关系。flex-box{display:flex;}让组件的宽度均分。list-item{flex:1;}让组件中的内容垂直居中。list-item{display:flex;align-items:center;/*verticallycentered*/justify-content:center;/*horizo??ntallycentered*/}全局样式和局部样式app.wxss中定义的样式是全局样式，应用于每个页面。页面的wxss文件中定义的样式是部分样式，只作用于对应的页面，覆盖app.wxss中的同一个选择器。渐变和动画CSS渐变linear-gradient()函数用于创建表示两种或多种颜色线性渐变的图像。在gradient.wxml页面输入如下代码：在gradient.wxss中输入：宽度：100vw；高度：100vh；它默认的渐变方向是从上到下改变渐变的方向background-image:linear-gradient(45deg,blue,red);/*渐变轴为45度，从Gradient从蓝到红*/background-image:linear-gradient(tolefttop,blue,red);/*从右下到左上，从蓝到红*/background-image:linear-gradient(0deg,blue,green40%,red);/*从下到上（渐变轴为0度），渐变从蓝色开始，渐变从高度的40%处的绿色开始,和结尾为red*/Filterfilter滤镜属性，可以对图像进行高斯模糊、调整对比度、转灰度图、色调旋转、图像透明度等操作。高斯模糊模糊，图像灰度(%)，图像透明不透明度(%).filter-displayimg{width:150px;height:auto;}.blur{滤镜：模糊（8px）；}.grayscale{过滤器：灰度（90%）；}.opacity{过滤器：不透明度（25%）；}.multiple{滤镜：模糊（8px）灰度（90%）不透明度（25%）；}Transform属性TransformCSStransform属性可以修改CSS视觉格式模型的坐标空间旋转、缩放、倾斜或平移给定的组件。变形Transform、过渡Transition、动画Animation.transform-显示图像{width:80px;height:80px;}.scale{变换：scale(1,0.5);}.translate{transform:translate(500px,20px);}.旋转{变换：旋转（45度）；}.skew{变换：倾斜（120deg）；}过渡属性TransitionCSStransitions可以控制组件从一个属性状态切换到另一个属性状态时的过渡效果。.selector{transition:[transition-property][transition-duration][transition-timing-function][transition-delay];}transition-property，应用过渡的CSS或动画属性的名称；transition-duration，整个转场效果的持续时间transition-timing-function指定转场效果的时间曲线transition-delay，转场效果延迟多长时间动画属性AnimationCSS动画使得从一个CSS样式配置转换成为可能到另一个CSS样式配置。动态@keyframesfadeIn{from{opacity:0;}至{不透明度：1；}}.fadeIn{动画：4s线性0s无限交替淡入；}抖动、闪烁、弹跳、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）如果本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改。立即处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎来到达达简书！这是一个有品质有态度的博客
