成都做網(wǎng)站之向網(wǎng)站添加動畫的簡單方法

2022-07-15    分類： 網(wǎng)站建設(shè)

在您的網(wǎng)站上添加精美的動畫是使訪問者與您的內(nèi)容保持互動的好方法。
就像在PowerPoint或Keynote中一樣，動畫可用于將訪問者的注意力集中在重要的內(nèi)容上。

不幸的是，對于大多數(shù)網(wǎng)站所有者來說，添加動畫并不像從下拉菜單中選擇動畫那樣容易。

在本文中，我們將引導(dǎo)您完成向網(wǎng)站添加流行動畫的最簡單方法。

注意：由于網(wǎng)站是建立在不同的平臺上的，這些平臺使用不同的代碼，因此，我們將介紹使用Animate.css的最通用方法，然后使用PageCloud解釋一個簡單的替代方法，其中不需要任何代碼。

什么是CSS動畫？
如您所知，CSS代表層疊樣式表。Web瀏覽器使用CSS來確定頁面上HTML元素的顯示方式。

成都做網(wǎng)站 創(chuàng)新互聯(lián)是很在行的

CSS動畫使您的內(nèi)容可以從一種樣式配置直觀地過渡到另一種樣式配置。對于缺乏編寫代碼經(jīng)驗的初學(xué)者來說，這可能會令人生畏。

這是一個簡化的示例，其中文本使用HTML和CSS在頁面上移動：

你好！
h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限;
}

@keyframes slidein {
 0 ％ {
  左邊距：0 ％ ;
 }
 50 ％ {
  左邊距：300 px ;
 }
 100 ％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上
h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}

@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上

h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}


@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上

h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}


@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上

h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}


@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上

h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}


@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上

h3 {
  動畫時間：8 s；
  animation-name：幻燈片
  animation-iteration-count：無限；
}


@keyframes  slidein {
 0％ {
  左邊距：0 ％ ;
 }
 50％ {
  左邊距：300 px ;
 }
 100％ {
  左邊距：0 ％ ;
 }
}
查看原始Hello.css 托管與?通過GitHub上
閱讀CSS時，您會看到：

動畫的總持續(xù)時間為8秒（第2行）。
使用的動畫是“ slidein”（第3行）。
動畫是無限循環(huán)的（第4行）。
“ Slidein”從頁面的左側(cè)開始（第9行）。
在一半的時間內(nèi)，標(biāo)題距頁面左側(cè)300px（第12行）。
在動畫的結(jié)尾，文本回到頁面的左側(cè)（第15行）。
如果您想嘗試編寫一些CSS，則可以使用CodePen修改上面的示例。

探索CSS動畫時，您會發(fā)現(xiàn)許多屬性，這些屬性使您可以自定義過渡，以便它們在設(shè)計中無縫工作。

另一方面，如果您想通過使用預(yù)構(gòu)建的動畫節(jié)省時間，則將要使用Animate.css。

什么是Animate.css？

Animate.css是由Daniel Eden創(chuàng)建的CSS動畫的跨瀏覽器庫。截至2019年，該庫包含77個預(yù)構(gòu)建的動畫，使您可以快速制作網(wǎng)站內(nèi)容的動畫。

這是Daniel Eden為樣式表中的“ SlideInLeft”動畫編寫的代碼示例：

@ -webkit-keyframes slideInLeft {
 來自 {
  -webkit變換：translate3d（-100 ％， 0 ， 0）;
  變換：translate3d（-100 ％， 0 ， 0）;
  能見度：可見；
 }

 到 {
  -webkit變換：translate3d（0 ， 0 ， 0）;
  變換：translate3d（0 ， 0 ， 0）;
 }
}

@keyframes slideInLeft {
 來自 {
  -webkit變換：translate3d（-100 ％， 0 ， 0）;
  變換：translate3d（-100 ％， 0 ， 0）;
  能見度：可見；
 }

 到 {
  -webkit變換：translate3d（0 ， 0 ， 0）;
  變換：translate3d（0 ， 0 ， 0）;
 }
}
查看原始GitHub 托管的Animate-example.css
@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}

@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawAnimate-example.css hosted with ? by GitHub

@-webkit-keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}


@keyframes slideInLeft {
 from {
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  visibility: visible;
 }

 to {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
 }
}
view rawGitHub 托管的Animate-example.css
通過使用該庫，您可以避免花費大量時間編寫和微調(diào)簡單的動畫。最好的部分？該庫是開源的，可以免費使用！

如何在標(biāo)準(zhǔn)Web開發(fā)中使用Animate.css
步驟1.  安裝Animate.css樣式表或?qū)⑵渖蟼鞯轿募芾砥鳌＿@將根據(jù)您使用的平臺而有所不同。另外，您可以使用Content Delivery Network（CDN）版本來避免將文件上傳到Web服務(wù)器。

第2步。在網(wǎng)頁或模板的鏈接Animate.css樣式表。例如：


< 頭>  
< 鏈接 rel =“ 樣式表 ” href =“ animate.min.css ” >


< 頭>
< 鏈接 rel =“ 樣式表 ” href =“ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css ” >
查看原始GitHub 托管于?的Animate-css-head-example.html

< 頭 >  


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


view rawAnimate-css-head-example.html hosted with ? by GitHub

 


< 頭>
< 鏈接 rel = “樣式表” href = “ https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css ” >
查看原始GitHub 托管于?的Animate-css-head-example.html
步驟3.將正確的類名稱添加到您的元素中

您必須在動畫名稱之前添加“動畫”。您還可以包括“無限”類，以使動畫無限循環(huán)。 

例如： 

< h1  class =“ 動畫無限彈跳延遲2秒 ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1  class = “動畫無限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
熟悉CSS之后，您可以修改樣式表中找到的任何屬性，以匹配您自己的選項。

如果您希望特定元素與默認(rèn)動畫不同，則可以添加修飾符以更改屬性，例如動畫的播放時間，延遲或播放次數(shù)：

例如：

。elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限;
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css

.elementNAME {
 動畫時間：3 s；
 動畫延遲：2 s；
 animation-iteration-count：無限；
}
查看原始GitHub 托管于?的Element-animate.css
就是這樣！

通過執(zhí)行上述步驟，可以將動畫添加到有權(quán)訪問源代碼的任何網(wǎng)站上的任何元素。

要了解有關(guān)自定義CSS動畫以及Java語言可以做什么的更多信息，我們建議您看看w3schools和GitHub。

但是，如果Web開發(fā)不是您的專長，那么還有諸如PageCloud之類的更簡單的替代方法，您根本不需要處理代碼。

如果您不熟悉網(wǎng)站建設(shè)，我們絕對建議您嘗試一下。 

方法1

步驟1-從此處下載Animate.css文件；
第2步 -登錄到PageCloud并打開要編輯的頁面；
第3步  -將下載的“ Animate.css”文件拖放到頁面上；
第4步  -選擇要設(shè)置動畫的元素，然后在編輯菜單中單擊“高級”；
第5步  -添加“動畫” +所需動畫的名稱（例如動畫反彈）；
第6步 -保存并查看您的實時網(wǎng)站。

方法2

步驟1-登錄到PageCloud并打開要編輯的頁面；
第2步 -將“ 滾動動畫文件 ”拖到您的頁面上；
第3步 -選擇要設(shè)置動畫的元素，然后在編輯菜單中單擊“高級”；
第4步 -將所需動畫的名稱添加到class字段；
第5步 -保存并查看您的實時網(wǎng)站。

瞧！你完成了。

專家提示：巧妙地使用動畫可以提升幾乎任何設(shè)計。但是，太多的動畫可能會分散注意力并關(guān)閉潛在客戶。如有疑問，少即是多。如果您想真正精通動畫，我們建議您查閱《動畫手冊》。

摘要
無論您有使用CSS的經(jīng)驗如何，都可以按照本文中的說明進(jìn)行操作，以向任何網(wǎng)站添加出色的動畫。

但是，動畫只是網(wǎng)站用來顯示令人驚嘆的內(nèi)容的眾多CSS屬性之一。您網(wǎng)站上的幾乎每個元素都需要一些CSS才能正確顯示：文本，背景，圖像，視頻...

如果您不想花幾天時間學(xué)習(xí)或擺弄代碼，我們建議您嘗試使用像PageCloud這樣的網(wǎng)站構(gòu)建器，它提供了一個用戶友好的界面，使您可以自定義網(wǎng)站的外觀而無需編寫任何代碼。

最重要的是，PageCloud提供了世界的支持團(tuán)隊，即使在您免費試用期間，我們也樂于回答您的任何問題！

本文題目：成都做網(wǎng)站之向網(wǎng)站添加動畫的簡單方法
網(wǎng)站網(wǎng)址：http://www.bm7419.com/news31/179331.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)頁設(shè)計公司、虛擬主機(jī)、網(wǎng)站設(shè)計、動態(tài)網(wǎng)站、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)