您現在的位置是:電腦技術吧?>? 基礎知識 ??>??3動畫,補間動畫??>??正文詳情

3動畫,補間動畫

承若南2019-11-07 18:32:12 人圍觀
簡介c4d動畫HTML的第一個例子中的HTML標記非常簡單我們在頁面上創建一個UL列表標記,并在其中創建幾個div來控制其整體進度動畫代碼如下:123456789101213傳統補間動畫

HTML第1個例子中的HTML標記非常簡單,我們在頁面上創建了一個ul列表標記,并在其內部創建了幾個div來控制它的總體進度動畫,代碼如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ul id=progress li div id=layer1 class=ball/div !-- layer1 control delay animation / ball is effect -- div id=layer7 class=pulse/div !-- layer7 control delay animation / pulse is effect -- /li li div id=layer2 class=ball/div div id=layer8 class=pulse/div /li li div id=layer3 class=ball/div div id=layer9 class=pulse/div /li li div id=layer4 class=ball/div div id=layer10 class=pulse/div /li li div id=layer5 class=ball/div div id=layer11 class=pulse/div /li /ul CSS 沒有什么不同的,我們僅僅為ul標記創建了圖形動畫,請注意中間過程中的特別的動畫效果,這個效果要歸功于CSS3的延遲動畫特性,CSS代碼如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 ul#progress { list-style:none; width:125px; margin:0 auto; padding-top:50px; padding-bottom:50px; } ul#progress li { /* Style your list */ float:left; position:relative; width:15px; height:15px; border:1px solid #fff; border-radius:50px; margin-left:10px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; background:#000; } ul#progress li:first-child { margin-left:0; } /* Remove the margin first li element */ .ball { /* Style your ball and set the animation */ background-color:#2187e7; background-image: -moz-linear-gradient(90deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(90deg, #2187e7 25%, #a0eaff); width:15px; height:15px; border-radius:50px; -moz-transform:scale(0); -webkit-transform:scale(0); -moz-animation:loading 1s linear forwards; -webkit-animation:loading 1s linear forwards; } .pulse { /* Style your second ball to create the amazing effects */ width:15px; height:15px; border-radius:30px; border: 1px solid #00c6ff; box-shadow: 0 0 5px #00c6ff; position:absolute; top:-1px; left:-1px; -moz-transform:scale(0); -webkit-transform:scale(0); -webkit-animation:pulse 1s ease-out; -moz-animation:pulse 1s ease-out; } /* Control Layers */ #layer1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } #layer2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } #layer3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layer4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layer5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layer7 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layer8 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layer9 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layer10 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } #layer11 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } @-moz-keyframes loading { 0%{-moz-transform:scale(0,0);} 100%{-moz-transform:scale(1,1);} } @-webkit-keyframes loading { 0%{-webkit-transform:scale(0,0);} 100%{-webkit-transform:scale(1,1);} } @-moz-keyframes pulse { 0% {-moz-transform: scale(0);opacity: 0;} 10% {-moz-transform: scale(1);opacity: 0.5;} 50% {-moz-transform: scale(1.75);opacity: 0;} 100% {-moz-transform: scale(0);opacity: 0;} } @-webkit-keyframes pulse { 0% {-webkit-transform: scale(0);opacity: 0;} 10% {-webkit-transform: scale(1);opacity: 0.5;} 50% {-webkit-transform: scale(1.75);opacity: 0;} 100% {-webkit-transform: scale(0);opacity: 0;} } 第2個CSS3 Loading動畫例子  HTML在第2個例子中,我們將會創建一個loading進度條,僅僅是創建一個寬度為100%的容器,然后在里面放一個class為expand的span標記,通過CSS3動畫進度條就能逐漸充滿整個屏幕,代碼如下: 1 2 3 div id=content span class=expand/span /div CSS 這個樣式看起來比上一個簡單很多,這是最基本的設置,你可以根據你的需要改變它。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 #content { width:100%; /* Full Width */ height:5px; margin:50px auto; background:#000; } .expand { width:100%; height:1px; margin:2px 0; background:#2187e7; position:absolute; box-shadow:0px 0px 10px 1px rgba(0,198,255,0.7); -moz-animation:fullexpand 10s ease-out; -webkit-animation:fullexpand 10s ease-out; } /* Full Width Animation Bar */ @-moz-keyframes fullexpand { 0% { width:0px;} 100%{ width:100%;} } @-webkit-keyframes fullexpand { 0% { width:0px;} 100%{ width:100%;} } 第3個CSS3 Loading動畫例子  HTML在最后一個例子中,我們利用opacity屬性重新創建了loading進度條,這里我們將用控制層控制其準確的動畫時序。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 ul id=loadbar li div id=layerFill1 class=bar/div !-- Control Layer Bar -- /li li div id=layerFill2 class=bar/div /li li div id=layerFill3 class=bar/div /li li div id=layerFill4 class=bar/div /li li div id=layerFill5 class=bar/div /li li div id=layerFill6 class=bar/div /li li div id=layerFill7 class=bar/div /li li div id=layerFill8 class=bar/div /li li div id=layerFill9 class=bar/div /li li div id=layerFill10 class=bar/div /li /ul CSS 你看到的效果和第1個差不多,但重要的是你懂得了如何用CSS來制作如此美妙的效果。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 ul#loadbar { list-style:none; width:140px; margin:0 auto; padding-top:50px; padding-bottom:75px; } ul#loadbar li { float:left; position:relative; width:11px; height:26px; margin-left:1px; border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333; background:#000; } ul#loadbar li:first-child { margin-left:0; } .bar { background-color:#2187e7; background-image: -moz-linear-gradient(45deg, #2187e7 25%, #a0eaff); background-image: -webkit-linear-gradient(45deg, #2187e7 25%, #a0eaff); width:11px; height:26px; opacity:0; -webkit-animation:fill .5s linear forwards; -moz-animation:fill .5s linear forwards; } #layerFill1 { -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; } #layerFill2 { -moz-animation-delay:1s; -webkit-animation-delay:1s; } #layerFill3 { -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; } #layerFill4 { -moz-animation-delay:2s; -webkit-animation-delay:2s; } #layerFill5 { -moz-animation-delay:2.5s; -webkit-animation-delay:2.5s; } #layerFill6 { -moz-animation-delay:3s; -webkit-animation-delay:3s; } #layerFill7 { -moz-animation-delay:3.5s; -webkit-animation-delay:3.5s; } #layerFill8 { -moz-animation-delay:4s; -webkit-animation-delay:4s; } #layerFill9 { -moz-animation-delay:4.5s; -webkit-animation-delay:4.5s; } #layerFill10 { -moz-animation-delay:5s; -webkit-animation-delay:5s; } @-moz-keyframes fill { 0%{ opacity:0; } 100%{ opacity:1; } } @-webkit-keyframes fill { 0%{ opacity:0; } 100%{ opacity:1; } }

版權聲明:本文由 承若南 整理編輯。

原標題:Flash動畫實例教程,moho動畫

轉載注明出處:http://www.dn9ww09s.icu/basics/11500.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 路由器怎么連接筆記本,筆記本連接路由器

    路由器怎么連接筆記本,筆記本連接路由器 相關圖片無線網隱藏了筆記本怎么連接越來越多的人使用電腦有些人有不止一臺電腦如果他們想同時訪問互聯網,他們需要使用路由器與有線路由器相比,無線路由器更受歡迎但如何將筆記本電...

  • 什么地漫談,漫談

    什么地漫談,漫談 相關圖片心漫談我們對HTML5有很高的期望希望它能繼承web應用開發簡單、部署升級方便、跨平臺、本地應用等功能強大、操作簡單友好的優點我還談到了為什么HTML5如此流行,為什漫談式...

  • 電腦cpu散熱硅脂,cpu上的硅脂

    電腦cpu散熱硅脂,cpu上的硅脂 相關圖片cpu硅脂在臺式機的CPU上涂抹硅脂是非常重要的它關系到計算機的綜合性能和CPU的使用壽命有必要知道計算機CPU的重要性,即核心處理器有個朋友不知道怎么涂硅脂,CPU直接cpu散熱硅脂排...

  • win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows

    win10電腦插耳機沒聲音,電腦耳機沒聲音怎么設置 windows 相關圖片win10插了耳機還外放計算機遇到各種問題是正常的耳機沒有聲音也是一個常見的問題這通常是一個駕駛問題或設置問題很容易解決有此問題的朋友可以看到以下解決方案據信,經常玩電腦...

  • 怎么換行,換行

    怎么換行,換行 相關圖片同個換行常見的文本段落換行情況表明,在實際應用中,我們經常會遇到這樣一個問題:一個段落的文本具有清晰的寬度,需要自動換行案例分析(如下圖所示):以上兩個圖不使用任...

  • 電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎

    電腦沒有hdmi接口怎么辦,電腦有hdmi接口嗎 相關圖片hdmi接口HDMI的英文全稱是“高清多媒體”,中文是高清多媒體接口HDMI接口可提供高達5Gbps的數據傳輸帶寬,可傳輸未壓縮音頻信號和高分辨率視頻信號hdmi接口有幾種...

  • css的三種樣式,css四種樣式

    css的三種樣式,css四種樣式 相關圖片css樣式表的三種方式首先,in line style使用style屬性將CSS直接寫入HTML標記,例如:pstyle=color:red此行將顯示為紅色/P注意:style屬性可css外部樣式...

  • intel cpu,英特爾cpu

    intel cpu,英特爾cpu 相關圖片intel cpu天梯圖我的電腦不能打印字體這些問題通常是剛接觸電腦的新朋友提出的雖然解決方法很簡單,但對于新手來說,如果沒有人指出,可能無法自己找出方法那么如何解決電腦打字...

  • 如何查看手機使用記錄,查看手機使用記錄

    如何查看手機使用記錄,查看手機使用記錄 相關圖片手機瀏覽記錄怎么查個人電腦是更私人的東西我們將在使用電腦的過程中儲存一些難看的東西隨著時間的推移,我們想知道是否有人把我們的電腦翻了如何檢查查一下電腦的歷史運行記...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽定義和用法注釋標簽用于在源文檔中插入注釋瀏覽器將忽略注釋可以使用注釋來解釋代碼,這有助于以后對其進行編輯您還可以將為程序定制的信息存儲在注釋內容中在這種情況下...

熱評文章

  • as ssd benchmark,ssdbenchmark怎么看

    as ssd benchmark,ssdbenchmark怎么看 相關圖片ssd固態硬盤測試軟件現在很多學生已經更換了固態硬盤,當然,他們也想測試它的性能比原來的機械硬盤快多少然后作為SSD基準,幫助用戶檢測SSD的連續讀取as ssd下載...

  • 文字放置,文字放置類

    文字放置,文字放置類 相關圖片放置文字掛機游戲CSS不依賴于容器的底部來對齊文本布局參數,一個好的方法也更好即使用position屬性來解決問題看下面的代碼,利用位置的相對定位和絕對定位功能,很容易實現DI純文...

  • 電腦主要看什么配置,買電腦主要看哪些配置

    電腦主要看什么配置,買電腦主要看哪些配置 相關圖片如何查看電腦配置參數隨著網絡時代的到來,計算機的普及程度越來越高面對電腦問題,仍然有很多問題其他學校的很多人都會問,買電腦時需要看什么樣的配置,什么樣的品牌又好又...

  • 什么是元素,元素

    什么是元素,元素 相關圖片元素B教程詳細信息摘要:HTML5詳細信息標簽困難:主要支持瀏覽器:Chrome 12 版本我最喜歡的新HTML5標簽是details元素,它剛剛集成到Chrome的E元素...

  • 電腦顯示器調亮度,電腦顯示屏怎么調亮度調節

    電腦顯示器調亮度,電腦顯示屏怎么調亮度調節 相關圖片臺式電腦屏幕亮度怎么調電腦基本上是人手,很多人每天都會用電腦瀏覽網頁、上網、看視頻、面對電腦屏幕,眼睛有點受不了,對吧屏幕亮度是個大問題,那么如何調整電腦屏幕亮度...

  • 電腦酷狗怎么傳歌,酷狗傳歌到電腦

    電腦酷狗怎么傳歌,酷狗傳歌到電腦 相關圖片酷狗傳歌在哪里隨著科技時代的飛速發展,現在很多高科技越來越方便,那么你還在擔心電腦版的酷狗對著手機唱歌嗎現在它不像以前那么乏味了,也不需要數據線這對小白來說是個空...

  • ie瀏覽器假死,瀏覽器卡死

    ie瀏覽器假死,瀏覽器卡死 相關圖片瀏覽器看視頻卡死在web開發中,經常會遇到瀏覽器對事件沒有響應而進入偽死狀態的事件,甚至會彈出腳本運行時間過長的提示框如果發生這種情況,則意味著腳本失控瀏覽器中至少有...

  • 守望先鋒2配置,守望先鋒2配置要求

    守望先鋒2配置,守望先鋒2配置要求 相關圖片守望先鋒對電腦配置要求高嗎《守望先鋒》是暴雪制作的第一款團隊射擊游戲,目前在中國正式上市這個游戲是基于不久的將來的地球來自世界各地的超級英雄將用他們獨特的能力在戰...

  • 基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的

    基礎換填應比基礎寬度超出多少,換填寬度為超出底面寬度的 相關圖片平板貨車寬度能超出多少當我們定義divwidth時,它可能包含很多內容,這些內容將超過它我們將大力支持div或tables,這將影響網頁的美觀介紹了一種利用CSS強制隱藏冗余內容和自床的寬度...

  • 局域網共享查看工具,一鍵局域網共享工具

    局域網共享查看工具,一鍵局域網共享工具 相關圖片局域網文件夾共享如果我們想訪問計算機局域網中的共享文件夾,我們需要計算機在同一個網絡中并建立一個局域網過去,計算機常常建立局域網,訪問計算機中的共享文件夾,但這也...

關注微信

变脸官网查询