前端可视化

本课程是华为消费者业务官网的仿站习作。 页面排版精美，照搬原站UI，一键导入HTML和CSS，还原度非常高，达到以假乱真的程度。 本课程重点是带领读者学习如何在众触低代码应用平台中嵌入JS代码

手把手教你从空白页面开始通过拖拉拽可视化的方式制作【立体键盘】的静态页面，不用手写一行CSS代码，全程只用10来行表达式就完成了【盲打练习】的交互逻辑。 整个过程在众触应用平台进行，快速直观。

手把手教你从空白页面开始通过拖拉拽可视化的方式制作【立方体透视动画图】。 整个过程在众触应用平台进行，不用手写一行CSS代码。 立方体它是有六个面的，并且它的每个面都是相同大小的。

clip-path用于裁剪元素，可以实现类似PS蒙版一样效果。像剪纸一样剪切出一个闭合的多边形（polygon），多边形里面的区域可以显示，区域外的隐藏。 多边形裁剪可视化编辑器中预设有多个常见的多边

所谓遮罩（mask-image），就是原始图片只显示遮罩图片非透明的部分，在PS中称为“蒙版”。类似于现实世界中一张A4卡纸剪了个洞，我们可以通过洞看卡纸后面的物体，这里卡纸相当于遮罩层，只不过洞是遮

写filter滤镜CSS代码的时候总不知道给什么值才最美观，一次次实验很费时？直接拖拉拽看效果！直观易懂高效。 整个过程在众触应用平台进行，不用手写一行CSS代码。模糊（blur） 给图像设置高斯模

新拟物设计(Neumorphism)关键是使用了两层阴影，一层高亮阴影（向阳面背光），一层暗色阴影（背光面），以及设置元素的背景颜色。凸的时候（outset）高亮影在左上，暗色在右下

手把手教你通过拖拉拽可视化的方式带你练习【Grid栅格布局】的各个属性，直观易懂！再也不愁记不住繁多的Grid属性了。 整个过程在众触应用平台进行，不用手写一行CSS代码。

手把手教你通过拖拉拽可视化的方式带你练习【Flex弹性布局】的各个属性，直观易懂！ 整个过程在众触应用平台进行，不用手写一行CSS代码。 flex-direction：主轴的方向，即决定项目的排列方向

手把手教你从空白页面开始通过拖拉拽可视化的方式制作一幅美丽的动态风景【湖上日出】，整个过程在众触应用平台进行，不用手写一行CSS代码。 澄澈的湖水娴静而又安详，岸边的水草迎着晨风朝你。。。