【湖上日出】从零开始通过拖拉拽可视化的方式制作动态风景，免手写CSS

手把手教你从空白页面开始通过拖拉拽可视化的方式制作一幅美丽的动态风景【湖上日出】，整个过程在众触应用平台进行，不用手写一行CSS代码。

最终制成效果图：

澄澈的湖水娴静而又安详，岸边的水草迎着晨风朝你微微点点头，平铺在水面上荷叶还没睡醒，一动也不动；偶尔冒出几个水泡，划出几道涟漪，打破平静的水面。

忽然间，在远处天水相连的地方一个夺目的太阳冒了出来，带着耀眼的光环，洒下通红的朝霞，把整个天空和湖面都染红了。太阳冉冉升起，给湖面撒下一条条金丝带，鲜艳夺目。

太阳消失在高空，深红的朝霞也渐渐消逝，留下两朵孤云，远处的山峰依旧耸立着，守望着这片湖水。。。

请访问哔哩哔哩观看详尽的教学视频：【众触课程】湖上日出_哔哩哔哩_bilibili

第一讲：演示，拆解构成部件，配色方案和CSS变量

调整视窗大小演示页面的自适应能力。
讲解画面的构成部件，并一个个拆解掉，直到回到空白页面。
讲解画面的配色方案，定义两组颜色变量，调整CSS变量值，观察整体配色的变化。

拆解构成部件：

配色方案：

第二讲：背景，山脉，山脉倒影

先给根节点添加线性渐变背景（background-image: linear-gradient）。
添加三座山脉的div组件，给予相同类名和各自类名，拖拽各自山脉到合适大小（width、height）。
给各座山脉添加八点控制的圆角（border-radius），拖拽控制点调整山脉的外形。
给各座山脉添加阴影（box-shadow）作为晨光照耀下的效果；添加绝对定位（position: absolute），并拖拽到合适位置。
添加可以同时选中三座山脉的CSS选择器，并在后面添加伪类（ ::before）作为山脉倒影；让其大小、外形和背景都继承（inherit）自山脉。
给倒影添加变形（transform），以山脉的底部中点作为原点（transform-origin），添加缩放（scaleY），把Y轴拉到-0.6。负号是让倒影倒过来，0.6是让倒影比山脉小。
给倒影添加滤镜（filter），调整到合适模糊度（blur）。

线性渐变背景：

第三讲：云朵，石头，荷叶

添加两个云朵div，使用共同类名拖拽云朵的大小和透明度（opacity）。
添加两个阴影（box-shadow），分别位于云朵的前后位置。
添加绝对定位分别把各个云朵并拖拽到合适位置。
添加变形（transform），把半边云朵往左移（translate）出视窗。
给云朵添加动画（animation），动画中让云朵缓缓往右漂移。
添加两个石头元素，石头的关键点是添加圆角，但只调整圆角的右上点到100%。
添加三个荷叶div，使用共同类名添加圆角和圆锥渐变背景（conic-gradient），给渐变背景添加一个透明色使椭圆有个缺口。
分别拖拽三个荷叶到合适大小，并添加绝对定位，拖拽到合适位置。

第四讲：小草，芦苇

小草的其实就是只有右边边框（border）div，并启用八点控制圆角（border-radius），拖拽右上角的两个控制点使小草微微弯腰。还有就是给小草添加多个投掷阴影（drop-shadow）滤镜（filter），作为小草的克隆体，并横向拖拽到合适位置。
芦苇也类似于小草，但多了个伪类来制作芦苇的花；还有就是添加动画，绕着芦苇根部（transform-origin）来旋转（rotate）。

小草：

第五讲：涟漪

共有三个涟漪，每个涟漪又由三个椭圆组成，每个椭圆是从圆心开始向四周扩散开来并渐渐消失（动画：scale(0) => scale(1)，opacity: 1 => opacity: 0）。
一个关键点是三个涟漪是在不同时间出现的，而且涟漪的各个圆环也是先后出现再扩散消失的。此时要给每个圆环设置不同的动画延时（animation-delay），但一共有 3 x 3 = 9 个圆环，一个个设置繁琐耗时。我们可以用一行表达式快速达到目的：
$$(".ripple div").forEach('$x.style["animation-delay"] = $index + "s"')
解读：选择ripple类下所有的div（即圆环），循环给每个圆环（当前项目$x）的样式设置动画延时为它自身的索引（$index），单位为秒（s）。

第六讲：太阳，朝霞

使用两个div容器的绝对定位把画面分成两部分，上半部分管理的是天空，里面放的上升的太阳和映照在空中的朝霞，下半部分是水面，背景是映照在水面上的霞光。
两种朝霞其实都是有径向渐变背景（radial-gradient）拖拽出来的，关键点是它们渐变的圆心都是在太阳升起的水平线上。
太阳的初始位置在水面下，位于自身容器的外边而看不到，动画开始的时候使它往上缓缓移动（translateY(-100vh)），升出水面从而观察到日出。
太阳有泛着白色的光芒的阴影（box-shadow）。

第七讲：太阳倒影，鳞光

太阳倒影的初始位置在太阳升起位置的水面上，位于自身容器的外边而看不到，动画开始的时候使它往下缓缓移动并且在30%的位置让其渐渐消失（opacity: 0）。
鳞光是阳光照耀下的湖面反射造成的波光粼粼。由八个光带组成，他们的做法非常类似于涟漪，使用表达式来批量设置动画延时，但鳞光还需要设置不同的顶点位置（top），和不同的宽度（width）。

等不及了，马上亲自动手试一试：众触低代码应用平台编辑模式

可视化画一幅画是比手写代码轻松愉快多了，但要是想做个网站呢？甚至开发非常复杂的WEB应用呢？
不急不急，众触应用平台本身就用来开发应用的平台，上面用到的仅仅是它前端可视化操作UI的能力而已，更多案例教学视频请移步哔哩哔哩空间：众触应用平台的个人空间_哔哩哔哩_Bilibili

【湖上日出】从零开始通过拖拉拽可视化的方式制作动态风景，免手写CSS相关推荐

从零开始制作【立体键盘】，画UI免写CSS，【盲打练习】的交互逻辑只用了10来行表达式
手把手教你从空白页面开始通过拖拉拽可视化的方式制作[立体键盘]的静态页面,不用手写一行CSS代码,全程只用10来行表达式就完成了[盲打练习]的交互逻辑. 整个过程在众触应用平台进行,快速直观. 最终U ...
可视化任务编排拖拉拽 | Scaleph 基于 Apache SeaTunnel的数据集成
这次在 6月 Meetup 为大家带来的是Scaleph 基于 Apache SeaTunnel (Incubating) 的数据集成介绍,希望你有所收获. 本次演讲主要包括五个部分: 关于Scale ...
可视化大屏拖拉拽---低代码平台FlyFish
可视化大屏 + 拖拉拽 == 低代码平台一.低代码平台是什么? 低代码开发平台通过少量代码就可以快速生成应用程序的开发平台,使用拖拽组件和模型驱动的逻辑来创建网页和移动应用程序: 二.低代码与零代 ...
php实现报表拖拉拽,看！这款BI工具用拖拉拽的方式做报表
原标题:看!这款BI工具用拖拉拽的方式做报表怎样的BI工具才算容易上手?那就非拖拉拽式的OurwayBI智能BI工具莫属了.这款由资深BI老厂商自主开发的智能BI工具操作简单,会拖拉拽就能做BI报表 ...
BI 不是可以拖拉拽取数吗？为什么还要 SQL 取数 ?
BI 工具不是可以直接拖拉拽取数吗 ?为什么还要写 SQL 取数 ? 这是很多初次接触商业智能 BI 的朋友会提到的一个问题,因为在他们接触到一些 BI 市场或者产品宣传的时候,很多人就是这么来介绍 ...
仿“易企秀”编辑器之拖拉拽
概述最近心血来潮,想仿造一下易企秀,做一个新的编辑器.主要是3年前那个编辑器有些自动化方面和动画性能方面的缺陷吧,人生不能有遗憾就早早动手吧.选择易企秀,而不是互动大师,主要是因为易企秀的技术难度比 ...
多个模型在测试集上的Accuracy以及AUC指标可视化对比实战
多个模型在测试集上的Accuracy以及AUC指标可视化对比实战目录多个模型在测试集上的Accuracy以及AUC指标可视化对比实战 #仿真数据
上传ML模型，一键可视化，终于能看懂神经网络到底在干啥了
行早发自凹非寺量子位 | 公众号 QbitAI 神经网络在工作的时候,里面到底是什么样? 为了能透视这个"AI黑箱"中的过程,加拿大蒙特利尔一家公司开发一个3D可视化工具Ze ...
java实现坐标图进行拖拉拽放_js实现限定区域范围拖拉拽效果
本文实例为大家分享了js实现限定区域范围拖拉拽的具体代码,供大家参考,具体内容如下需要在范围内拖拉拽,之前看来许多资料觉得都不是特别满足要求,今天自己写了一个,通过监听鼠标按下.鼠标抬起.鼠标移动事 ...

【湖上日出】从零开始通过拖拉拽可视化的方式制作动态风景，免手写CSS

【湖上日出】从零开始通过拖拉拽可视化的方式制作动态风景，免手写CSS相关推荐

最新文章

热门文章