如何在WordPress中輕鬆添加CSS動畫


您是否在熱門網站上看到了那些漂亮的CSS動畫? 動畫效果,如滑動內容,在功能框中淡入淡出,彈跳圖像等。在本文中,我們將向您展示如何輕鬆地在WordPress中添加CSS動畫而無需編寫任何代碼。

使用CSS為定價表設置動畫

什麼時候以及為什麼應該使用CSS動畫?

CSS動畫可讓您在頁面的不同部分吸引用戶的注意力。

您可以使用它們來製作產品功能的動畫或號召性用語按鈕。

當用戶向下滾動頁面時,許多網站都使用CSS動畫。 這會向頁面添加一個敘事元素,並且隨著用戶向下滾動,項目也會進行。

CSS動畫也比Flash或視頻要快。 它們加載速度很快,並且得到大多數現代Web瀏覽器的支持。

您可以將CSS動畫手動添加到WordPress主題或子主題的樣式表中。 但是,大多數初學者不想編輯他們的主題文件,也不想花時間學習CSS。

話雖如此,讓我們看看如何輕鬆地將CSS動畫添加到WordPress網站。

設置CSS Animate! 插入

我們將在本教程中使用一個插件。 它允許您使用WYSIWYG編輯器創建CSS動畫。

您需要做的第一件事就是安裝並激活Animate! 插入。 該插件可以直接使用,沒有可供您配置的設置。

只需創建一個新帖子,您就會在WordPress可視編輯器中註意到一個名為“動畫!”的新按鈕。

WordPress視覺編輯器中的Animate it按鈕

單擊該按鈕將彈出一個彈出窗口,您可以在其中設計CSS動畫。 該插件支持許多CSS動畫供您選擇。

動畫編輯器

首先,您需要選擇一種動畫樣式。 之後,您需要選擇動畫延遲和持續時間。 最後,您需要選擇何時顯示動畫。

該插件提供了三種選擇。 您可以在單擊,懸停或滾動偏移時運行動畫。

選擇何時運行動畫

對設置滿意後,可以單擊“對其進行動畫處理”按鈕以查看動畫的預覽。

接下來,單擊插入按鈕以將動畫添加到您的WordPress帖子或頁面中。 您會注意到,該插件將在其中添加一個包含一些虛擬內容的簡碼到帖子編輯器中。

CSS動畫! 帖子編輯器中的簡碼

您需要刪除簡碼中的虛擬內容,並將其替換為您自己的內容,圖像或其他要設置動畫的內容。

用您自己的內容替換簡碼中的虛擬內容

現在您已經失望了,單擊以保存或發布該帖子,然後單擊“預覽”按鈕。 您將看到內容精美的動畫。

我們希望本文能幫助您學習如何在WordPress中輕鬆添加CSS動畫。 您可能還想看一下我們對5種最佳拖放WordPress頁面構建器的比較。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。