久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

7種炫酷HTML5 SVG液態水滴融合動畫特效

html5教程 html5模板網
這是一組使用HTML5 SVG過濾器制作的炫酷液態水滴融合動畫特效。這些SVG動畫特效使一些HTML元素，如菜單、分頁按鈕、APP、選擇框等元素的過渡動畫像幾粒水滴一樣融合分解，效果非常的
這是一組使用HTML5 SVG過濾器制作的炫酷液態水滴融合動畫特效。這些SVG動畫特效使一些HTML元素，如菜單、分頁按鈕、APP、選擇框等元素的過渡動畫像幾粒水滴一樣融合分解，效果非常的酷。

在線演示

7種炫酷HTML5 SVG液態水滴融合動畫特效.zip

SVG Filters


通過SVG Filters我們可以修改一個給定的圖形，創建我們需要的結果。SVG中包含了一種可以執行各種操作的filter元素，下面列出了一些可用的SVG filter元素：

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight

當使用一個SVG filter的時候，我們可以將一個操作的結構作為另一個操作的輸入，從而創建出無限的動畫效果。
最常見的SVG filter效果是通過<feGaussianBlur>來制作模糊效果。


  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
  2.   <defs>
  3.     <filter id="blur" x="0" y="0">
  4.       <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  5.     </filter>
  6.   </defs>
  7.   <rect x="50" y="50" width="500" height="300" fill="#8d81ac" filter="url(#blur)" />  
  8. </svg>      
復制代碼


所得到的結果如下圖：


<feGaussianBlur>元素的in屬性用于定義原始的SVG輸入，可以使用下面的幾個關鍵字：


  • SourceGraphic
  • SourceAlpha
  • BackgroundImage
  • BackgroundAlpha
  • FillPaint
  • StrokePaint

這里也可以使用指向前一個執行結果的字符串，通過執行結果字符串，我們可以創建連續的動畫效果。在液態水滴融合動畫特效中就是使用這種方法制作的。

更為復雜的例子是組合使用多個SVG filter來制作所需的效果，如 drop shadow 陰影效果：

  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="600" height="400">
  2.   <defs>
  3.   <filter id="dropshadow" x="0" y="0" width="200%" height="200%">
  4.     <feOffset result="offsetResult" in="SourceAlpha" dx="20" dy="20" />
  5.     <feGaussianBlur result="blurResult" in="offsetResult" stdDeviation="5" />
  6.     <feBlend in="SourceGraphic" in2="blurResult" mode="normal" />
  7.   </filter>
  8.   </defs>
  9.   <rect width="500" height="300" fill="#8d81ac" filter="url(#dropshadow)" />
  10. </svg>      
復制代碼

得到的結果如下：

這種效果的原理是先移動元素，然后將該元素的副本進行模糊處理來制作陰影效果。通過feBlend使用in="SourceAlpha"簡單的設置原始圖像位于模糊圖像的上面。該通道是原始圖像的alpha通道，模糊后會變為黑色。

SVG Filters for HTML

在HTML元素上使用SVG Filters十分簡單。可以在HTML頁面中定義需要的SVG Filter，然后可以通過CSS樣式表來使用它們：

  1. .filterClass {
  2.   -webkit-filter: url("#goo");
  3.   filter: url("../index.html#goo");
  4. }     
復制代碼

定義一個沒有-webkit-前綴的不同路徑值有兩個原因：一是為了使Firefox瀏覽器能夠正確的找到該路徑。二是對于相對路徑，如果我們只使用#goo，它會在當前頁面中查找樣式表，而我們使用的是引用樣式表，因此會找不到這個filter。通過設置這種設置，不論是內置樣式表還是外部樣式表，都可以正確的找到所需的filter。我們也可以通過JavaScript來添加filter。

  1. function setFilter(value){
  2.   $effectContainer.css({
  3.     webkitFilter: value,
  4.     filter: value,
  5.   });
  6. }   
復制代碼

上面的value值類似于'url(#goo)'。

當前瀏覽器對在HTML元素上使用 SVG Filters 的支持非常好，可以查看這里。

下面是一些學習SVG Filters的好資料，可以學習參考：

  • Applying SVG effects to HTML content
  • Hands On: SVG Filter Effects
  • Cross-browser filters with CSS and SVG
  • Smarter SVG filters
  • How to go beyond the basics with SVG filters

應用舉例

我們來看看其中的圓形菜單按鈕例子的實現方法：

這種效果的HTML代碼如下：

  1. <div class="menu">
  2.   <div class="menu-wrapper">
  3.     <ul class="menu-items">
  4.       <li class="menu-item">
  5.         <button class="menu-item-button">
  6.           <i class="menu-item-icon icon icon-reply"></i>
  7.         </button>
  8.         <div class="menu-item-bounce"></div>
  9.       </li>
  10.       <li class="menu-item">
  11.         <button class="menu-item-button">
  12.           <i class="menu-item-icon icon icon-box"></i>
  13.         </button>
  14.         <div class="menu-item-bounce"></div>
  15.       </li>
  16.       <li class="menu-item">
  17.         <button class="menu-item-button">
  18.           <i class="menu-item-icon icon icon-trash"></i>
  19.         </button>
  20.         <div class="menu-item-bounce"></div>
  21.       </li>
  22.     </ul>
  23.     <button class="menu-toggle-button">
  24.       <i class="fa fa-plus menu-toggle-icon"></i>
  25.     </button>
  26.   </div>
  27. </div>        
復制代碼

在HTML中定義一個內聯的SVG對象：


  1. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  2.   <defs>
  3.     <filter id="goo">
  4.       <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  5.       <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
  6.       <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  7.     </filter>
  8.   </defs>
  9. </svg>  
復制代碼

接下來使用如上面所說的CSS filter 屬性來指定filter的路徑和樣式：


  1. .menu {
  2.   /* other styles */

  4.   -webkit-filter: url("#goo");
  5.   filter: url("../menu.html#goo");
  6. }   
復制代碼

下面來分析一些filter，filter的第一步操作是通過feGaussianBlur來模糊對象。




接下來是feColorMatrix過濾器，它在例子中的作用的增強alpha通道，于blur結合，創建更加強烈的模糊效果。



Learn more about how to apply a color matrix here.

最后，Wilder使某些元素可見，需要在模糊對象只是繪制原始的對象，為了做到這一點，我們在atop操作中使用feComposite過濾器。

via:http://www.htmleaf.com/html5/SVG/201503111500.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 国精产品一品二品国精在线观看 | 久久久人成影片一区二区三区 | 日本人做爰大片免费观看一老师 | 四虎永久免费黄色影片 | 欧美一区二区三区在线免费观看 | 在线观看中文字幕 | 日韩欧美一级精品久久 | 亚洲综合在线一区 | 亚洲精品av在线 | 国产免费一级一级 | 极品久久| 成年免费大片黄在线观看岛国 | 亚洲电影免费 | 国产成人精品一区二区三区视频 | 亚洲五码久久 | 欧美精品久久久久久久久老牛影院 | 日本久久久影视 | 在线中文字幕av | 天天综合日日夜夜 | 国产福利在线 | 欧美1级| 中国免费黄色片 | 国产精品视频www | 国产精品1区2区3区 欧美 中文字幕 | 成人在线中文字幕 | 国产欧美久久一区二区三区 | 成人一级视频在线观看 | 在线观看中文字幕 | 四虎影音| 精品国产18久久久久久二百 | 97国产精品| 国产精品中文 | 久久久久久av | 一区二区三区在线观看视频 | 国产精品毛片一区二区三区 | 亚洲一区视频 | 欧美精品一区在线 | 亚洲综合色视频在线观看 | 一级毛片色一级 | 国产一区| 最新中文字幕在线 |