成都做網(wǎng)站之向網(wǎng)站添加動(dòng)畫(huà)的簡(jiǎn)單方法
2022-07-15 分類(lèi)： 網(wǎng)站建設(shè)
在您的網(wǎng)站上添加精美的動(dòng)畫(huà)是使訪問(wèn)者與您的內(nèi)容保持互動(dòng)的好方法。
就像在PowerPoint或Keynote中一樣，動(dòng)畫(huà)可用于將訪問(wèn)者的注意力集中在重要的內(nèi)容上。
不幸的是，對(duì)于大多數(shù)網(wǎng)站所有者來(lái)說(shuō)，添加動(dòng)畫(huà)并不像從下拉菜單中選擇動(dòng)畫(huà)那樣容易。
在本文中，我們將引導(dǎo)您完成向網(wǎng)站添加流行動(dòng)畫(huà)的最簡(jiǎn)單方法。
注意：由于網(wǎng)站是建立在不同的平臺(tái)上的，這些平臺(tái)使用不同的代碼，因此，我們將介紹使用Animate.css的最通用方法，然后使用PageCloud解釋一個(gè)簡(jiǎn)單的替代方法，其中不需要任何代碼。
什么是CSS動(dòng)畫(huà)？
如您所知，CSS代表層疊樣式表。Web瀏覽器使用CSS來(lái)確定頁(yè)面上HTML元素的顯示方式。
成都做網(wǎng)站 創(chuàng)新互聯(lián)是很在行的
CSS動(dòng)畫(huà)使您的內(nèi)容可以從一種樣式配置直觀地過(guò)渡到另一種樣式配置。對(duì)于缺乏編寫(xiě)代碼經(jīng)驗(yàn)的初學(xué)者來(lái)說(shuō)，這可能會(huì)令人生畏。
CSS動(dòng)畫(huà)使您的內(nèi)容可以從一種樣式配置直觀地過(guò)渡到另一種樣式配置。對(duì)于缺乏編寫(xiě)代碼經(jīng)驗(yàn)的初學(xué)者來(lái)說(shuō)，這可能會(huì)令人生畏。
這是一個(gè)簡(jiǎn)化的示例，其中文本使用HTML和CSS在頁(yè)面上移動(dòng)：
你好！
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限;
}
@keyframes slidein {
0 ％ {
左邊距：0 ％ ;
}
50 ％ {
左邊距：300 px ;
}
100 ％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
h3 {
動(dòng)畫(huà)時(shí)間：8 s；
animation-name：幻燈片
animation-iteration-count：無(wú)限；
}
@keyframes slidein {
0％ {
左邊距：0 ％ ;
}
50％ {
左邊距：300 px ;
}
100％ {
左邊距：0 ％ ;
}
}
查看原始Hello.css 托管與?通過(guò)GitHub上
閱讀CSS時(shí)，您會(huì)看到：
動(dòng)畫(huà)的總持續(xù)時(shí)間為8秒（第2行）。
使用的動(dòng)畫(huà)是“ slidein”（第3行）。
動(dòng)畫(huà)是無(wú)限循環(huán)的（第4行）。
“ Slidein”從頁(yè)面的左側(cè)開(kāi)始（第9行）。
在一半的時(shí)間內(nèi)，標(biāo)題距頁(yè)面左側(cè)300px（第12行）。
在動(dòng)畫(huà)的結(jié)尾，文本回到頁(yè)面的左側(cè)（第15行）。
如果您想嘗試編寫(xiě)一些CSS，則可以使用CodePen修改上面的示例。
探索CSS動(dòng)畫(huà)時(shí)，您會(huì)發(fā)現(xiàn)許多屬性，這些屬性使您可以自定義過(guò)渡，以便它們?cè)谠O(shè)計(jì)中無(wú)縫工作。
另一方面，如果您想通過(guò)使用預(yù)構(gòu)建的動(dòng)畫(huà)節(jié)省時(shí)間，則將要使用Animate.css。
什么是Animate.css？
Animate.css是由Daniel Eden創(chuàng)建的CSS動(dòng)畫(huà)的跨瀏覽器庫(kù)。截至2019年，該庫(kù)包含77個(gè)預(yù)構(gòu)建的動(dòng)畫(huà)，使您可以快速制作網(wǎng)站內(nèi)容的動(dòng)畫(huà)。
這是Daniel Eden為樣式表中的“ SlideInLeft”動(dòng)畫(huà)編寫(xiě)的代碼示例：
@ -webkit-keyframes slideInLeft {
來(lái)自 {
-webkit變換：translate3d（-100 ％， 0 ， 0）;
變換：translate3d（-100 ％， 0 ， 0）;
能見(jiàn)度：可見(jiàn)；
}
到 {
-webkit變換：translate3d（0 ， 0 ， 0）;
變換：translate3d（0 ， 0 ， 0）;
}
}
@keyframes slideInLeft {
來(lái)自 {
-webkit變換：translate3d（-100 ％， 0 ， 0）;
變換：translate3d（-100 ％， 0 ， 0）;
能見(jiàn)度：可見(jiàn)；
}
到 {
-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
通過(guò)使用該庫(kù)，您可以避免花費(fèi)大量時(shí)間編寫(xiě)和微調(diào)簡(jiǎn)單的動(dòng)畫(huà)。最好的部分？該庫(kù)是開(kāi)源的，可以免費(fèi)使用！
如何在標(biāo)準(zhǔn)Web開(kāi)發(fā)中使用Animate.css
步驟1. 安裝Animate.css樣式表或?qū)⑵渖蟼鞯轿募芾砥鳌＿@將根據(jù)您使用的平臺(tái)而有所不同。另外，您可以使用Content Delivery Network（CDN）版本來(lái)避免將文件上傳到Web服務(wù)器。
第2步。在網(wǎng)頁(yè)或模板的鏈接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.將正確的類(lèi)名稱添加到您的元素中
您必須在動(dòng)畫(huà)名稱之前添加“動(dòng)畫(huà)”。您還可以包括“無(wú)限”類(lèi)，以使動(dòng)畫(huà)無(wú)限循環(huán)。
例如：
< h1 class =“ 動(dòng)畫(huà)無(wú)限彈跳延遲2秒 ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
< h1 class = “動(dòng)畫(huà)無(wú)限彈跳延遲-2s ” >您好！
查看原始GitHub 托管?的h1-class-example.html
熟悉CSS之后，您可以修改樣式表中找到的任何屬性，以匹配您自己的選項(xiàng)。
如果您希望特定元素與默認(rèn)動(dòng)畫(huà)不同，則可以添加修飾符以更改屬性，例如動(dòng)畫(huà)的播放時(shí)間，延遲或播放次數(shù)：
例如：
。elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限;
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
.elementNAME {
動(dòng)畫(huà)時(shí)間：3 s；
動(dòng)畫(huà)延遲：2 s；
animation-iteration-count：無(wú)限；
}
查看原始GitHub 托管于?的Element-animate.css
就是這樣！
通過(guò)執(zhí)行上述步驟，可以將動(dòng)畫(huà)添加到有權(quán)訪問(wèn)源代碼的任何網(wǎng)站上的任何元素。
要了解有關(guān)自定義CSS動(dòng)畫(huà)以及Java語(yǔ)言可以做什么的更多信息，我們建議您看看w3schools和GitHub。
但是，如果Web開(kāi)發(fā)不是您的專長(zhǎng)，那么還有諸如PageCloud之類(lèi)的更簡(jiǎn)單的替代方法，您根本不需要處理代碼。
如果您不熟悉網(wǎng)站建設(shè)，我們絕對(duì)建議您嘗試一下。
方法1
步驟1-從此處下載Animate.css文件；
第2步 -登錄到PageCloud并打開(kāi)要編輯的頁(yè)面；
第3步 -將下載的“ Animate.css”文件拖放到頁(yè)面上；
第4步 -選擇要設(shè)置動(dòng)畫(huà)的元素，然后在編輯菜單中單擊“高級(jí)”；
第5步 -添加“動(dòng)畫(huà)” +所需動(dòng)畫(huà)的名稱（例如動(dòng)畫(huà)反彈）；
第6步 -保存并查看您的實(shí)時(shí)網(wǎng)站。
方法2
步驟1-登錄到PageCloud并打開(kāi)要編輯的頁(yè)面；
第2步 -將“ 滾動(dòng)動(dòng)畫(huà)文件 ”拖到您的頁(yè)面上；
第3步 -選擇要設(shè)置動(dòng)畫(huà)的元素，然后在編輯菜單中單擊“高級(jí)”；
第4步 -將所需動(dòng)畫(huà)的名稱添加到class字段；
第5步 -保存并查看您的實(shí)時(shí)網(wǎng)站。
瞧！你完成了。
專家提示：巧妙地使用動(dòng)畫(huà)可以提升幾乎任何設(shè)計(jì)。但是，太多的動(dòng)畫(huà)可能會(huì)分散注意力并關(guān)閉潛在客戶。如有疑問(wèn)，少即是多。如果您想真正精通動(dòng)畫(huà)，我們建議您查閱《動(dòng)畫(huà)手冊(cè)》。
摘要
無(wú)論您有使用CSS的經(jīng)驗(yàn)如何，都可以按照本文中的說(shuō)明進(jìn)行操作，以向任何網(wǎng)站添加出色的動(dòng)畫(huà)。
但是，動(dòng)畫(huà)只是網(wǎng)站用來(lái)顯示令人驚嘆的內(nèi)容的眾多CSS屬性之一。您網(wǎng)站上的幾乎每個(gè)元素都需要一些CSS才能正確顯示：文本，背景，圖像，視頻...
如果您不想花幾天時(shí)間學(xué)習(xí)或擺弄代碼，我們建議您嘗試使用像PageCloud這樣的網(wǎng)站構(gòu)建器，它提供了一個(gè)用戶友好的界面，使您可以自定義網(wǎng)站的外觀而無(wú)需編寫(xiě)任何代碼。
最重要的是，PageCloud提供了世界的支持團(tuán)隊(duì)，即使在您免費(fèi)試用期間，我們也樂(lè)于回答您的任何問(wèn)題！
本文題目：成都做網(wǎng)站之向網(wǎng)站添加動(dòng)畫(huà)的簡(jiǎn)單方法
網(wǎng)站網(wǎng)址：http://www.muchs.cn/news31/179331.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 網(wǎng)頁(yè)基本知識(shí)? 2022-07-15
- 帶你淺析營(yíng)銷(xiāo)型成都網(wǎng)站制作 2022-07-15
- 營(yíng)銷(xiāo)型網(wǎng)站特點(diǎn)有哪些? 2022-07-15
- SEO優(yōu)化的方案是如何分析并運(yùn)用的？ 2022-07-15
- 網(wǎng)站建設(shè)常見(jiàn)的四種網(wǎng)站類(lèi)型的介紹分析 2022-07-15
- 簡(jiǎn)談成都網(wǎng)站建設(shè)的分類(lèi) 2022-07-15
- 武漢網(wǎng)絡(luò)營(yíng)銷(xiāo) | 大數(shù)據(jù)對(duì)網(wǎng)絡(luò)營(yíng)銷(xiāo)有什么作用？ 2022-07-15
- 成都營(yíng)銷(xiāo)推廣，離不開(kāi)這4大營(yíng)銷(xiāo)思維！ 2022-07-15
- 使用CSS讓網(wǎng)站結(jié)構(gòu)更好更利于美觀和推廣 2022-07-15
- 中小企業(yè)做seo優(yōu)化必須知道的原則 2022-07-15
- 網(wǎng)站定制都有哪些優(yōu)點(diǎn)，為什么成流行趨勢(shì)？ 2022-07-15
- 安卓app的開(kāi)發(fā)有哪些流程？ 2022-07-15
- 成都網(wǎng)站制作：零技術(shù)人員如何制作網(wǎng)站？ 2022-07-15
- 企業(yè)網(wǎng)站建設(shè)中的雷區(qū)，你中招了嗎? 2022-07-15
- 成都定制小程序，如何規(guī)劃？ 2022-07-15
- 開(kāi)發(fā)APP、小程序、H5，選擇開(kāi)發(fā)哪個(gè)比較好？ 2022-07-15
- 成都創(chuàng)新互聯(lián)科技： 網(wǎng)站索引量大減怎么處理 2022-07-15
- 建設(shè)怎樣的網(wǎng)站才是有靈魂的網(wǎng)站？ 2022-07-15
- 企業(yè)服務(wù)類(lèi)成都開(kāi)發(fā)小程序的詳細(xì)分步指南 2022-07-15