空白のページから視覚的にドラッグ アンド ドロップして、美しくダイナミックな風景 [湖の日の出] を作成する方法を段階的に説明します。プロセス全体は、CSS コードを 1 行も手書きすることなく、Zhongtouch アプリケーション プラットフォーム上で実行されます。
最終的なレンダリングは次のとおりです。
湖の澄んだ水は静かで穏やかで、岸辺の水草は朝風にわずかにうなずき、水面に横たわる蓮の葉はまだ目覚めず動かず、波紋が静かな水を打ち砕きます。
空と水が繋がる彼方に突然、まばゆいばかりの太陽が現れ、まばゆい後光を放ち、真っ赤な朝焼けを振りまき、空と湖全体を赤く染め上げた。太陽がゆっくりと昇り、湖面に金色のリボンを垂らし、明るく眩しい。
太陽は空高くに消え、真っ赤な朝焼けはしだいに消えていき、二つの孤立した雲を残して、遠くの山々は依然としてそびえ立ち、湖を見守っていました。。。
哔哩哔哩にアクセスして詳しい説明ビデオをご覧ください: [群衆タッチコース] 湖の日の出_哔哩哔哩_bilibili
講義 1: デモンストレーション、コンポーネント、カラースキーム、CSS 変数の分解
-
ウィンドウ サイズを調整して、ページの自己適応能力を実証します。
-
画面の構成要素を説明し、白紙のページに戻るまで 1 つずつ分解します。
-
画面の配色を説明し、2 セットのカラー変数を定義し、CSS 変数値を調整して、全体の配色の変化を観察します。
コンポーネントを分解します。
カラースキーム:
レクチャー 2: 背景、山、山の反射
-
まず、線形グラデーションの背景 (background-image:linear-gradient) をルート ノードに追加します。
-
3 つの山の div コンポーネントを追加し、同じクラス名とそれぞれのクラス名を指定し、それぞれの山を適切なサイズ (幅、高さ) にドラッグします。
-
8 点で制御された境界半径を各山脈に追加し、制御点をドラッグして山脈の形状を調整します。
-
朝の光の効果として各山に影（box-shadow）を追加し、絶対位置（position：absolute）を追加し、適切な位置までドラッグします。
-
同時に 3 つの山を選択できる CSS セレクターを追加し、山の反映として疑似クラス (::before) を追加し、そのサイズ、形状、背景を山から継承 (継承) させます。
-
反射に変換 (transform) を追加し、山の底の中点を原点として使用し (transform-origin)、スケール (scaleY) を追加して、Y 軸を -0.6 に引き上げます。マイナス記号を指定すると反射が逆さまになり、0.6 を指定すると反射が山より小さくなります。
-
反射にフィルターを追加し、適切なぼかしに調整します。
線形グラデーションの背景:
レクチャー 3: 雲、石、蓮の葉
-
2 つの雲 div を追加し、共通のクラス名を使用して雲のサイズと不透明度をドラッグします。
-
雲の前後に 2 つの影 (box-shadow) を追加します。
-
絶対位置を追加し、各雲を適切な位置にドラッグします。
-
雲の半分をビューポートの外へ左に移動 (移動) する変換を追加します。
-
雲にアニメーションを追加し、アニメーション内で雲がゆっくりと右に流れていくようにします。
-
2 つの石の要素を追加します。石のキー ポイントは丸い角を追加することですが、丸い角の右上の点のみを 100% に調整します。
-
蓮の葉の div を 3 つ追加し、共通のクラス名を使用して角丸と円錐グラデーションの背景 (conic-gradient) を追加し、グラデーションの背景に透明色を追加して楕円に隙間を作ります。
-
3 つの蓮の葉を適切なサイズにドラッグし、絶対位置を追加して、適切な位置にドラッグします。
講義 4: 草、葦
-
Xiaocao は実際には右側の境界線 (border) div だけで、8 点のコントロールの丸い角 (border-radius) が有効になっているので、右上隅の 2 つのコントロール ポイントをドラッグして、Xiaocao を少し曲げます。もう 1 つは、草のクローンとして複数のドロップ シャドウ フィルタを草に追加し、それを適切な位置まで水平方向にドラッグすることです。
-
葦も草に似ていますが、葦の花を作成するための追加の疑似クラスがあり、葦の根元を中心に回転するアニメーション (transform-origin) もあります。
草：
講義 5: 波紋
-
波紋は 3 つあり、それぞれの波紋は 3 つの楕円で構成されており、それぞれの楕円は円の中心から広がって徐々に消えていきます（アニメーション：scale(0) =>scale(1)、不透明度：1 => opacity : 0）。
-
ポイントは、3つの波紋が異なるタイミングで現れ、その波紋の輪も連続して現れては拡散して消えていくという点です。このとき、リングごとに異なるアニメーション遅延（animation-lay）を設定する必要がありますが、リングは全部で3×3＝9個あり、一つ一つ設定するのは面倒で時間がかかります。1 行の式で目的をすぐに達成できます:
$$(".ripple div").forEach('$x.style["animation-lay"] = $index + "s"')
解釈: すべて選択リップル クラスの下では、div (リング) がループして、各リング (現在のアイテム $x) のスタイルのアニメーション遅延を独自のインデックス ($index) として設定します。単位は秒 (s) です。
第 6 講: 太陽、朝焼け
-
2つのdivコンテナの絶対配置により画面を2分割し、上は朝日や空に映る朝焼けを含む空、下は水面、背景を管理しています。水面に反射する輝き。
-
どちらの朝焼けも実際には放射状のグラデーションの背景で描かれていますが、そのグラデーションの中心がすべて朝日の地平線上にあることがポイントです。
-
太陽の初期位置は水面の下にあり、コンテナの外側にあるため見えません。アニメーションが開始されると、太陽はゆっくりと上方に移動し (translateY(-100vh))、水面から上がって日の出を観察します。 。
-
太陽には白い輝きを持つボックスシャドウがあります。
第7講：太陽の反射、鱗
-
太陽の反射の初期位置は太陽が昇る位置の水面上で、コンテナの外に出て見えませんが、アニメーションが始まるとゆっくりと下に移動し、不透明度30%の位置で徐々に消えていきます。 :0) 。
-
鱗光とは、太陽光が湖面に反射して起こる輝きのことです。8 つのライト ストリップで構成されています。アプローチはリップルと非常によく似ており、エクスプレッションを使用してアニメーション遅延をバッチで設定しますが、スケール ライトも異なる頂点位置 (上部) と異なる幅 (幅) を設定する必要があります。
待ちきれません。今すぐ試してみてください: Zhongtouch ローコード アプリケーション プラットフォーム編集モード
視覚的に絵を描くことは、コードを手書きするよりもはるかに簡単で楽しいものですが、Web サイトを作成したい場合はどうすればよいでしょうか? 非常に複雑な WEB アプリケーションを開発することもありますか?
急ぐ必要はありません。ZhongTouch アプリケーション プラットフォーム自体はアプリケーションの開発に使用され、そのフロントエンドの視覚操作 UI 機能のみが使用されます。その他の事例指導ビデオについては、Bilibili スペースに移動してください: ZhongTouch アプリケーション プラットフォームのパーソナル スペース_哔哩哔哩_ビリビリ