• <strike id="mem0a"><s id="mem0a"></s></strike>
    
    
  • <kbd id="mem0a"></kbd>
    <ul id="mem0a"></ul>
     
    深圳網站設計制作欣賞

    將想法與焦點和您一起共享

    深圳網站建設設計 深圳網站優化排名 深圳網站設計制作欣賞

    3個驚人的CSS動畫效果

    2016-07-14  閱讀: 深圳網站建設設計

    3個驚人的CSS動畫效果,會吸引你的,美麗的視覺設計不夠多,現代設計需要很大的互動真正站出來。在你設計的動畫可以提供明確的、直接的關注,創造一個愉快的經歷。

    深圳網站制作交互設計是令人興奮的,但昂貴的。經常需要來回的設計者和開發者之間獲得動畫是正確的;但它不需要這樣。
    css代碼提供有限的知識與設計人員提高項目與驚人的運動效果,會讓用戶前所未有的機會。
    從最簡單的東西開始:從一個屏幕到另一個…
     
    視圖技術簡單的滑塊
    你可以建立一個文本編輯器和一個瀏覽器的測試,但我更喜歡使用這樣的工具或CodePen JSFiddle。
    建立一個基本的布局,像這樣:

    3個驚人的CSS動畫效果
    你需要一個“屏幕”,然后在屏幕上的標尺。滑塊超出屏幕的邊緣,并保持模型的圖像。

    3個驚人的CSS動畫效果

    為了達到這個目標,你需要確保你添加溢出:隱藏于屏幕區。
    你的CSS將看起來像這樣:

    3個驚人的CSS動畫效果

    在CSS的最后一條語句是什么控制滑塊的位置,移動滑塊div。留下的第二圖像320px揭示。

     

    有一點創意,你可以運行這個簡單的技術,創造一些聰明的動畫。事情真的開始變得有趣,當你結合的影響。例如:我再現推特的刷卡揭示檔案',從他們的移動應用程序使用一個非常類似的“滑塊”的方法。

    3個驚人的CSS動畫效果

    三維變換
    帶上你的三維變換如果你需要的話,因為他們提供了一個極好的視覺效果。
    使用WebKit的變換:屬性,我們可以把瀏覽器作為一個三維空間和深度使一些動畫。iOS7特別是利用“空單”在其原生應用隱喻。同時三維變換是非常有用的用于創建'反彈'或'啪'動畫。
    我用同樣的:懸停從我們前面的例子和一些3D變換策略來創建這個效果:

    3個驚人的CSS動畫效果

    使用JQUERY和JAVASCRIPT
    到目前為止,我們只看CSS:懸停產生動畫效果。使用jQuery,我們可以使用()事件指定addclass()和removeclass()在元素。這給了我們一個巨大的彈性,做任何一種瘋狂的動畫,我們希望。
    下面我有一個功能叫做卡斯科,適用于開放每個在0.15s間隔4個菜單項的類。這個開放類提供了圖標不透明度:1;和左:0;在以前,他們在不透明度:0;和左:- 50px。這將創建菜單俏皮的打開的效果。實驗自己在JSFiddle。
    這最后一個是一個比較極端的例子,但它只是表明這個系統原型什么是可能的:

    3個驚人的CSS動畫效果

    深圳軟件設計
    網店設計制作

    3個驚人的CSS動畫效果

    設計你自己的簡單的動畫,你會把你自己和你的開發團隊大量的時間和精力。用CSS可以實驗動畫和發送你的工程師的生活,呼吸,運動的例子。所有需要把你的模型是生命一點點代碼。

    將文章分享到..