日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

页面转发后文本显示???_使用Divi的滑动动画显示过程的进度

發布時間:2025/4/17 编程问答 40 豆豆
生活随笔 收集整理的這篇文章主要介紹了 页面转发后文本显示???_使用Divi的滑动动画显示过程的进度 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
歡迎來到這個由6章組成的系列的第3章,它將教你如何使用Divi的新“動畫”選項設計出色的頁面板塊。我將向你介紹如何構建實時演示頁面的不同部分,以向你展示向網站添加動畫的技術。動畫功能確實很有趣并且易于使用。借助Visual Builder,你可以看到自己的創作在每個階段都栩栩如生。快來加入我的行列,探索Divi動畫的力量。在我們的上一篇文章中,當我們構建了動畫演示頁面的第3部分和第4部分時,我向你展示了一些創造性的方法來設計和設置網站部分的動畫以顯示產品和服務。今天,我們將處理第5部分,該部分使用出色的動畫來顯示四個令人驚嘆的Blurb模塊。讓我們開始吧!這是我們在今天的文章中將要構建的概覽

準備設計元素本教程真正需要的唯一東西是用于Blurb模塊的4個 207×188圖像圖標。這是我將要使用的圖像。

構建第5部分使用Visual Builder,添加一個常規部分(如果你遵循該系列,請在第4部分下)。?在執行其他操作之前,請在你的部分中添加背景顏色#f5f9fc并保存設置。使用兩個文本模塊添加部分標題然后添加一列。在該行中,添加文本模塊并按如下所示更新設置。在內容標簽下…
  • 內容:“設置”

在設計標簽下…
  • 文字字體:粗體(B),大寫(TT)

  • 文字字型大小:15px

  • 文字文字顏色:#6a8091

  • 文字字母間距:5px

  • 文字行高:1.9em

  • 文字方向:居中

  • 間距:底部20像素

  • 動畫樣式:滑動

  • 動畫方向:向上

  • 動畫時間:850ms

此動畫效果是簡單的向上滑動并淡入以查看的效果。

保存設置現在,通過在剛創建的模塊下添加另一個文本模塊來添加標題。更新文本設置,如下所示:在內容標簽下…在內容框的文本選項卡中添加以下html:

Say?Hello?to?DIVI</h1>

在設計標簽下…
  • 標題字體:粗體(B)

  • 標題文字對齊:居中

  • 標題字體大小:39px

  • 標題文字顏色:#2f3a54

注意:由于這是h1標題,因此我們需要編輯“標題文本”設置。

  • 寬度:600像素(輸入此值)

  • 模塊對齊:居中

  • 自定義邊距:底部20px

  • 動畫樣式:滑動

  • 動畫方向:向上

  • 動畫時間:850ms

  • 動畫強度:12%

  • 動畫速度曲線:緩出

注意:我真的很喜歡此部分標題的緩和速度曲線效果。它的著陸速度逐漸變慢,干凈利落。保存設置設計四個導語現在我們準備添加Blurb模塊。首先,創建一個具有四列(1/4 1/4 1/4 1/4)結構的行。

將導語模塊添加到第一列(最左側)。

然后更新“導語設置”。在內容標簽下…在“內容框”的文本選項卡中添加以下html:<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida sed nec purus.p><p><a href="#" style="font-size: 12px;letter-spacing: 1px; color: #6a8091;"><strong>READ MORE ?strong>a>p>注意:我手動添加了一個鏈接,為用戶提供了另一個單擊選項。確保手動鏈接的URL與你添加到blurb模塊URL的鏈接匹配。
  • 網址:[輸入網址]

  • 圖片:[輸入您的207×188圖片]

  • 背景顏色:#ffffff

在設計標簽下…
  • 文字方向:居中

  • 標題字體:默認,粗體(B),大寫(TT)

  • 標題文字顏色:#7969f4

  • 標題字母間距:3px

  • 標題行高度:3em

  • 正文文字顏色:#6a8091

  • 正文行高度:1.9em

  • 自定義填充:頂部40px,右側40px,底部40px,左側40px

  • 動畫樣式:滑動

  • 動畫方向:向上

  • 動畫時間:700ms

  • 動畫強度:4%

  • 圖像/圖標動畫:無動畫

注意:此動畫會在很長一段時間內將Blurb模塊向上滑入視圖。請密切注意即將到來的模塊的動畫延遲(此模塊為0%)。這將成為模塊逐漸彼此相鄰堆疊的整體效果的關鍵要素。

在高級標簽下…在“主要元素”框中添加以下自定義CSS:border-radius: 6px;box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);保存設置現在你已經完成了一個Blurb,我們可以將其用作接下來的三個Blurb的模板。繼續并右鍵單擊該模塊,然后選擇復制模塊。然后將模塊粘貼(ctrl + v)到剩余的三列中的每列中。

現在,我們要做的就是向三個重復的模塊中的每個模塊添加一些更新。對于第二列中的Blurb模塊,更新以下內容:在內容標簽下…
  • 標題:步驟2

  • 內容:[更新文本和手動鏈接網址]

  • 網址:[更新Blurb網址]

  • 圖片:[添加新的207×188圖片]

在設計標簽下…
  • 標題文字顏色:#e944ff

  • 動畫延遲:50ms

  • 動畫強度:12%

注意:請注意,與第一個Blurb相比,動畫延遲增加到50ms,并且強度增加到12%。在為每個blurb設置動畫時,這將有助于創建逐步計時。對于第三欄中的Blurb模塊,更新以下內容:在內容標簽下…
  • 標題:步驟3

  • 內容:[更新文本和手動鏈接網址]

  • 網址:[更新Blurb網址]

  • 圖片:[添加新的207×188圖片]

在設計標簽下…
  • 標題文字顏色:#3ebaef

  • 動畫延遲:100ms

  • 動畫強度:20%

注意:同樣,你可以看到動畫延遲和強度的增加。對于第四列中的Blurb模塊,更新以下內容:在內容標簽下…
  • 標題:步驟4

  • 內容:[更新文本和手動鏈接網址]

  • 網址:[更新Blurb網址]

  • 圖片:[添加新的207×188圖片]

在設計標簽下…
  • 標題文字顏色:#95d624

  • 動畫延遲:150ms

  • 動畫強度:30%

更新所有Blurbs后,請按以下方式更新“行”設置:在設計標簽下…
  • 使用自定義寬度:是

  • 自定義寬度:1366px

  • 使用自定義裝訂線寬度:是

  • 裝訂線寬度:2

  • 動畫樣式:縮放

  • 動畫時間:700ms

  • 動畫起始不透明度:100%

注意:此動畫通過在整個過程中添加縮放效果,確實很好地構架了其他模塊動畫。保存設置現在,你已經完成了本部分。演示頁面的導語下方還有另一張圖片,但我認為沒有必要在此處添加它。

下載這些部分以方便導入愛極致云公眾號的聊天窗口發送關鍵詞20201121獲取布局下載鏈接!要使用這些下載,請首先在我們的下載文件夾中找到名為Animation_Effects_Part_3.zip的壓縮文件。將其解壓縮以顯示以下導入。Animation Effects Part 3 (section 5).json在WordPress管理員中導航至Divi> Divi Library> Import&Export。彈出可移植性模式時,單擊導入選項卡,然后單擊標記為選擇文件的按鈕。選擇你喜歡的json文件,然后單擊“導入Divi Builder布局”。導入完成后,導航至文章或頁面,你可以向其中添加以上部分之一。激活視覺生成器。導航至你要向其中添加上述部分之一的頁面部分。單擊添加新部分圖標時,將顯示“從庫添加”選項。選擇此選項,然后選擇所需的布局。

總結第5部分的設計和動畫確實顯示了少量動畫設置能對內容傳遞產生的影響。連續顯示每個簡介,不僅看起來很酷,而且考慮到無論如何你都顯示了流程的步驟,這也很有意義。接下來

在本系列的第4章中,我將向你展示用于顯示產品或下載內容的精美布局。而且,當然,我將始終強調動畫的巧妙用法。如果你對創建網站有興趣歡迎來撩愛極致小哥哥哦~

長按關注,有更多干貨哦~▼▼▼

- End -

點個贊,證明你還愛我

總結

以上是生活随笔為你收集整理的页面转发后文本显示???_使用Divi的滑动动画显示过程的进度的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。