html5動效
① html5+css3可以實現哪些特效
具體說起來得說到明天早上去，這樣說吧，你在網頁上看的所有的東西，現在HTML5+CSS3都可以實現，包括網頁游戲，flash之類的。各種動畫，各種之前需要flash什麼的，現在css3和html5都可以搞定，很流弊啦
② 前端實現動效動畫需要學習前端里的什麼技術
首先考慮css動畫然後考慮js。
velocity：很全面的JavaScript動畫庫
vivus：可以動態描繪 SVG 的 JS 庫, 支持多種動畫
Web Animation：Javascript 實現的 Web Animation API
scrollReveal.js：使元素以非常酷帥的方式進入畫布 (Viewpoint)
snabbt.js：一個利用 Javascript 和 CSS transform 的 animation 庫
transit：jquery實現的css動畫
matter-js：2D 物理效果引擎，碰撞、彈跳等
parallax：一個用於響應智能手機 orientation 的庫
focusable：是頁面上一個元素高亮的庫，關燈效果
sensor.js：在智能移動設備瀏覽器上，通過HTML5的api使用移動設備的功能。定位、運動、傾斜等
animatable：僅僅依靠 border-width 和 background-position 實現的各種動態效果
Bounce.js：漂亮的css3動畫庫
GreenSock：基於svg，很強大的動畫效果，High-performance HTML5 animations that work in all major browsers.
dynamics.js：彈性物理效果
③ html5動效頁面 ios可以看 安卓不行怎麼辦
瀏覽器兼容問題，ios是調用ios專有的瀏覽器的。
④ HTML5動畫有什麼用途
html5動畫主要服務對象還是給予web的應用，並不會對全部app開發造成威脅，這樣有利於不同類型應用使 用不同的開發方式，靈活性更強。利用HTML5開發移動應用的優點主要有以下幾點：
1.離線緩存為HTML5開發移動應用提供了基礎
HTML5 Web Storage API可以看做是加強版的cookie，不受數據大小限制，有更好的彈性以及架構，可以將數據寫入到本機的ROM中，還可以在關閉瀏覽器後再次打開時恢復數據，以減少網路流量。
同時，這個功能算得上是另一個方向的後台「操作記錄」，而不佔用任何後台資源，減輕設備硬體壓力，增加運行流暢性。
2.音頻視頻自由嵌入，多媒體形式更為靈活
原生開發方式對於文字和音視頻混排的多媒體內容處理相對麻煩，需要拆分開文字、圖片、音頻、視頻，解析對應的URL並分別用不同的方式處理。
HTML5在這個方面完全不受限制，可以完全放在一起進行處理。
3.地理定位，隨時隨地分享位置
充分發揮移動設備對定位上的優勢，推動LBS應用發展。
可以綜合使用GPS、wifi、手機等方式讓定位更為精準、靈活。
地理位置定位，讓定位和導航不再專屬導航軟體，地圖也不用下載非常大的地圖包，可以通過緩存來解決，到哪兒下哪兒，更靈活。
4.Canvas繪圖，提升移動平台的繪圖能力
使用Canvas API可以簡單繪制熱點圖收集用戶體驗資料
支持圖片的移動、旋轉、縮放等常規編輯
Canvas – 2D的繪圖功能支持
Canvas 3D – 3D的繪圖功能支持
SVG – 向量圖支援
5.專為移動平台定製的表單元素
瀏覽器中出現的html5表單元素與對應的鍵盤：
只需要簡單的聲明 <input type=」email」> 即可完成對不同樣式鍵盤的調用，簡捷方便。
6.豐富的交互方式支持
提升互動能力：拖拽、撤銷歷史操作、文本選擇等
Transition – 組件的移動效果
Transform – 組件的變形效果
Animation – 將移動和變形加入動畫支持
7.HTML5使用上的優勢
更低的開發及維護成本;
使頁面變得更小，減少了用戶不必要的支出;而且，性能更好使耗電量更低;
方便升級，打開即可使用最新版本，免去重新下載升級包的麻煩，使用過程中就直接更新了離線緩存。
8.CSS3 視覺設計師的輔助利器
CSS3支持了字體的嵌入、版面的排版，以及最令人印象深刻的動畫功能。
Selector – 更有彈性的選擇器
Webfonts – 嵌入式字體
Layout – 多樣化的排版選擇
Stlying radius gradient shadow – 圓角、漸變、陰影
Border background – 邊框的背景支持
使用CSS3來完成部分視覺工作，載入速度快，節省代碼及圖片，也為用戶節約了帶寬。
9.實時通訊
以往網站由於HTTP協議以及瀏覽器的設計，實時的互動性相當的受限，只能使用一些技巧來「模擬」實時的通訊效果，但HTML5提供了完善的實時通訊支持。
10.檔案以及硬體支持
不知道大家有沒有發現，在Gmail等新的網頁程序當中，已經可以透過拖拉的方式將檔案作為郵件附件?這就是HTML5檔案的功能中的Drag』n Drop和File API。
11.語意化
語意化的網路是可以讓計算機能夠更加理解網頁的內容，對於像是搜索引擎的優化(SEO)或是推薦系統可以有很大的幫助。
12.雙平台融合的app開發方式，提高工作效率
依照目前iPhone/Android 迅速提升市佔率的情勢來看，未來如果想要在先進的智慧型手機上撰寫應用程式，要不是選擇使用Objective-C
+ CocoaTouch Framework 撰寫iPhone/iPad 應用程式，就是選擇Java + Android Framework
撰寫Android 應用程式，如果想要同時支援兩種平台，勢必要維護兩套程式碼，對於剛起步的小服務而言也算是個小有負擔的維運成本。
⑤ CSS3 Animation 返回動效
<html>
<head>
<styletype="text/css">
.scale{
width:200px;
height:200px;
background-color:#06f;
top:180px;
left:180px;
position:relative;
}
.scale:hover{
animation:scale2slinear;
}
@keyframesscale{
0%{
transform:scale(1);
}
25%{
transform:scale(1.5);
}
50%{
transform:scale(2);
}
75%{
transform:scale(1.5);
}
100%{
transform:scale(1);
}
}
</style>
</head>
<body>
<divclass="scale"/>
</div>
</body>
</html>
⑥ 如何用ppt思維，做一個手機h5動效頁面
HTML5頁面製作工具，大體分為兩類：基於HTML5的網站工具和手機APP工具（當然還有一些其他的，例如基於微信公眾號的等，下面也會介紹）。
先總的說一下個人感受
1.基於HTML5的工具網站：功能較強大，單頁面的操作性較強，可完成各種頁面交互效果；但是某些時候會有操作「失靈」的現象，如上傳圖片失敗，點擊保存失敗，生成失敗等。原因你懂得~
2.手機工具APP：相比起工具網站來講，顯得比較順手，有大量模板套用，製作簡單快捷；但是拘泥於現有的模板，使得單頁面不會有較大的可操作空間，從而無法實現DIY交互效果。
下面展開說下每個使用過的工具吧
基於HTML5的工具網站：
【兔展】
優點：頁面DIY程度較高，動效實現起來也簡易方便，可製作比較任性的H5頁面。
缺點：屏幕界面大小不可調節，上傳的圖會比例失調；生成後到各尺寸屏上頁面會存在拉伸現象。
（此圖意在說明上傳的圖片的尺寸都是網站自己默認的一個尺寸，不是圖片本身的尺寸，不利於使用者調整）
【MAKA.im】 可以具體編輯，單頁操作性較高，有新手（有模板）和高階（無模板）兩種編輯模式；翻頁效果比兔展多，模板也更強大一些。
【居高互動刊】
優點：最簡單易上手的工具之一，根據提示一步一步的添加，共4步，最後生成微雜志。相比其他在線工具，較穩定。
缺點：目前沒試通製作單頁上的交互效果，沒找到開啟pro功能的入口。
【ANIMATRON】
優點：像flash的在線版，功能強大，可以創建HTML5動畫。適合有動畫基礎的人做演示製作。
缺點：需要動畫製作基礎；工作界面響應時間長；貌似只能分享到twitter、Facebook、google+、tumblr？
【iSpring 7】
噱頭是PPT轉HTML5工具，完美與PPT兼容，可製作Html5移動課件。
不過，目前我只能連著VPN再用Safari才能打開網站鏈接。
【秀製作】
優點：版式輕松，製作快捷，寬頻穩定。
缺點：對圖片和文字在各種屏幕上的顯示沒有做很好的適配；不能對模板中文字的編輯調整位置。
手機工具APP：
【初頁】
優點：模板質量高，套用模板編輯時效率高，操作簡單快捷，效果和體驗在製作H5頁面的APP工具裡面算是出類拔萃。
缺點：單頁面可操作性較低，僅支持套用模板。
【快邀約】快速製作邀請函
優點：易上手，省時高效，便於統計。
缺點：頁面簡陋，只能選擇固有模板創建文字和添加圖片。
【易企秀】中小微企業的移動場景營銷管家
優點：套用模板，創建快捷，用來做企業介紹、產品推薦。擁有強大的推廣統計、客戶管理功能。嗯，這里應該贊一個。
缺點：只能用模板，DIY程度低；統計數據是否准確需要進一步確認，目前看來可能有遺漏數據的現象（在小范圍測試中，統計到的數量小於應有的數量）。
【微貼】：通過微信公眾號創建H5頁面
優點：手機公眾號內直接創建簡單頁面，根據提示創建即可，無腦方便快捷。
缺點：只是單頁面展示，承載不了交互效果等特效和更多內容。
總結
工具網站做的H5頁面，多注重單獨頁面的自定義交互方案，DIY程度高，相對來說用時較長，又受制於帶寬因素，故影響操作；
工具APP做的H5頁面，多注重效率，目前都是套用模板，因而對單頁面的DIY程度較低，交互效果受限。
⑦ 用AE做出來的動效能在HTML5裡面用嗎
不行，編碼不一樣
⑧ html5時代的主要的網頁設計風格有哪些
一、首先從功能與設計目標來看， H5專網頁主要有以下4大類型：
1.活動運營型
為活動推廣運營而打造的H5頁面是最常見的類型，形式多變，包括游戲、邀請函、賀卡、測試題等形式。與以往簡單的靜態廣告圖片傳播不同，如今的H5活動運營頁需要有更強的互動、更高質量、更具話題性的設計來促成用戶分享傳播。從進入微信H5頁面到最後落地到品牌App內部，如何設計一套合適的引流路線也頗為重要。
2.品牌宣傳型
不同於講究時效性的活動運營頁，品牌宣傳型H5頁面等同於一個品牌的微官網，更傾向於品牌形象塑造，向用戶傳達品牌的精神態度。在設計上需要運用符合品牌氣質的視覺語言，讓用戶對品牌留下深刻印象。
3.產品介紹型
聚焦於產品功能介紹，運用H5的互動技術優勢盡情展示產品特性，吸引用戶買買買。
這一類型的H5頁面多見於汽車品牌，LEXUS NX是其中的優秀代表案例。精緻和極富質感的建模、細膩的光效營造出酷炫的視覺風格。用手指跟隨光的軌跡切割畫面揭開序幕，通過合理優雅的觸碰、摩擦、滑動等互動形式帶領用戶一同探索產品的7大特性，宏觀和微觀都照顧周全。
4.總結報告型
自從支付寶的十年賬單引發熱議後，各大企業的年終總結現也熱衷於用H5技術實現，優秀的互動體驗令原本乏味的總結報告有趣生動了起來。
二．形式為功能服務
在確定了專題頁的功能目標之後，接下來就是關鍵的設計階段了。如何有的放矢地進行設計，需要考慮到具體的應用場景和傳播對象，從用戶角度出發去思考什麼樣的頁面是用戶最想看的最會去分享的。
1.簡單圖文
簡單圖文是早期最典型的H5專題頁形式。「圖」的形式千變萬化，可以是照片、插畫、GIF等。通過翻頁等簡單的交互操作，起到類似幻燈片的傳播效果。考驗的是高質量的內容本身和講故事的能力。
2.禮物/賀卡/邀請函
每個人都喜歡收到禮物的感覺，抓住這一心理，品牌推出了各種H5形式的禮物、賀卡、邀請函，通過提升用戶好感度來潛移默化地達到品牌宣傳的目的。既然是禮物，那創意和製作便是重要的加分項。
3.問答/評分/測試
問答形式的H5頁面也屢見不鮮了，利用用戶的求知慾和探索欲，一路選選選，看最後到底是什麼成績。一條清晰的線索是必要的，最後到達的結果頁也需要合理不突兀，如果能輔以出彩的視覺和文案，弱化答題的枯燥感那就再好不過了。
4.游戲
從 「圍住神經貓」、「看你有多色」等單純小游戲再到杜蕾斯「一夜N次郎」（即山寨版「別踩白塊兒」）等品牌植入式小游戲，H5游戲因為操作簡單、競技性強，一度風靡朋友圈，但創意缺乏和同質化現象導致用戶對無腦小游戲逐漸產生了厭倦。品牌要在游戲上做到成功傳播，需要在玩法和設計上多下點功夫。
三．為設計加分的4個要點
一個H5頁面設計品質的出眾與否，會直接影響其傳播效果，甚至影響到用戶對品牌形象的認知。在這里總結出以下的設計要點：
1.細節與統一
要成就高品質的用戶體驗，必須考慮到細節與整體的統一性。復古擬物的視覺風格，那字體就不能過於現代；幽默調侃的調調，那文案措辭就不能過於嚴肅；打情感內容牌的，動效就不能過於花哨。
2.緊跟熱點，利用話題效應
想要你的H5專題頁一夜爆紅，第一時間抓住熱點並火速上線，借機進行品牌宣傳也不失為一條捷徑。
3.講個好故事，引發情感共鳴
不論H5的形式如何多變，有價值的內容始終是第一位的。在有限的篇幅里，學會講故事，引發用戶的情感共鳴，將對內容的傳播形成極大的推動。
4.合理運用技術，打造流暢的互動體驗
隨著技術的發展，如今的HTML5擁有眾多出彩的特性，讓我們能輕松實現繪圖、擦除、搖一搖、重力感應、擦除、3D視圖等互動效果。相較於塞入各種不同種類的動效導致頁面混亂臃腫，我們更提倡的是合理運用技術，用心專注於為用戶提供流暢的互動體驗。
結語
隨著手機硬體的升級、HTML5技術的發展以及微信平台的開放，HTML5的跨平台、低成本、快迭代等優勢被進一步凸顯，這對身處於移動互聯網大潮的企業主、品牌、設計師和開發者來說，都將是一個最好的時代。
⑨ h5 css3 動效 文字 怎麼酷炫
可以不用js實現，直接css3編寫就可以了，真的不一樣。
希望我的回答可以幫到你，有什麼不懂可以追問。
⑩ 在現代網頁設計中，動效有哪些常見的用法
載入動效
動效最常用的一個地方就是進度條。載入進度條的載入動效會改變用戶對於時間的感知，通過轉移注意力的方式讓用戶等待感降低。簡單的載入動效其實比復雜的更好。額外的東西，比如聲音效果就沒有存在的必要了。用戶在有趣的動效上投注了越多的注意力，就越容易忽略等待的過程。
2.進度動效
動效還可以用來展示交互或者操作的進度。
3.界面框架
界面框架會將界面載入之後的大概樣式給展示出來，界面框架會讓用戶產生內容一瞬間就載入好了的錯覺。這種動效可以應用在絕大多數的網頁和APP當中，它會明顯強化用戶的參與感。
4.視覺反饋
將界面反饋視覺化地呈現給用戶是非常實用的.良好的交互設計需要視覺反饋來支撐，傳達交互完成後的結果，讓交互可用、可見、可預期。網站界面中哪些元素可交互如果是不可知的、交互的結果也不可預期，混亂就不可避免了。周密的交互設計可以幫助用戶理解，將這種混亂降到最低。
5.懸停動效
桌面端交互主要還是藉助觸控板和滑鼠，游標懸停特效很大程度是為這種情況而存在的，同時，它也是最常見的動效之一。當用戶不知道某個控制項怎用的時候，會很直覺地將游標移動到上面去，這個時候，懸停特效能夠很好的吸引他們的目光。移動端由於交互方式的差異，幾乎沒法使用懸停動效。無論是按鈕還是輸入框，當你點擊屏幕的時候就已經觸發控制項了，只能在隨後呈現結果，而無法像懸停動效一樣預覽。
6.長滾動頁面
不得不說，首屏的設計一直是網頁設計的焦點所在，設計師將注意力集中在這個充滿價值的區域是有道理的。但是頁面餘下的部分同樣很重要，事實上，有個說法是「正常媒體頁面上百分之66%的用戶注意力都在首屏之下」，因此結合了動效的長滾動頁面同樣非常有用。
7.動效讓滾動式的交互充滿了趣味。動畫能夠讓長滾動頁面所承載的故事更加鮮活有意思，相比於炫酷的動效，微妙的動效給人的感覺更加到位。