7種炫酷HTML5 SVG液態(tài)水滴融合動畫特效
May 17, 2016 am 09:07 AM7種炫酷HTML5 SVG液態(tài)水滴融合動畫特效.zip
SVG Filters
通過SVG Filters我們可以修改一個給定的圖形,創(chuàng)建我們需要的結(jié)果。SVG中包含了一種可以執(zhí)行各種操作的filter元素,下面列出了一些可用的SVG filter元素:
- feBlend
- feColorMatrix
- feComponentTransfer
- feComposite
- feConvolveMatrix
- feDiffuseLighting
- feDisplacementMap
- feFlood
- feGaussianBlur
- feImage
- feMerge
- feMorphology
- feOffset
- feSpecularLighting
- feTile
- feTurbulence
- feDistantLight
- fePointLight
- feSpotLight
當(dāng)使用一個SVG filter的時候,我們可以將一個操作的結(jié)構(gòu)作為另一個操作的輸入,從而創(chuàng)建出無限的動畫效果。
最常見的SVG filter效果是通過
- ??
- ? ?
- ? ?? ?
- ? ?
- ??
- ??
??
- ? ?? ?
所得到的結(jié)果如下圖:
- SourceGraphic
- SourceAlpha
- BackgroundImage
- BackgroundAlpha
- FillPaint
- StrokePaint
這里也可以使用指向前一個執(zhí)行結(jié)果的字符串,通過執(zhí)行結(jié)果字符串,我們可以創(chuàng)建連續(xù)的動畫效果。在液態(tài)水滴融合動畫特效中就是使用這種方法制作的。
更為復(fù)雜的例子是組合使用多個SVG filter來制作所需的效果,如 drop shadow 陰影效果:
- ??
- ??
- ? ?
- ? ?
- ? ?
- ??
- ??
- ??
- ? ?? ?
得到的結(jié)果如下:
這種效果的原理是先移動元素,然后將該元素的副本進(jìn)行模糊處理來制作陰影效果。通過feBlend使用in="SourceAlpha"簡單的設(shè)置原始圖像位于模糊圖像的上面。該通道是原始圖像的alpha通道,模糊后會變?yōu)楹谏?/font>
SVG Filters for HTML
在HTML元素上使用SVG Filters十分簡單。可以在HTML頁面中定義需要的SVG Filter,然后可以通過CSS樣式表來使用它們:
- .filterClass {
- ??-webkit-filter: url("#goo");
- ??filter: url("../index.html#goo");
- }? ???
定義一個沒有-webkit-前綴的不同路徑值有兩個原因:一是為了使Firefox瀏覽器能夠正確的找到該路徑。二是對于相對路徑,如果我們只使用#goo,它會在當(dāng)前頁面中查找樣式表,而我們使用的是引用樣式表,因此會找不到這個filter。通過設(shè)置這種設(shè)置,不論是內(nèi)置樣式表還是外部樣式表,都可以正確的找到所需的filter。我們也可以通過JavaScript來添加filter。
- function setFilter(value){
- ??$effectContainer.css({
- ? ? webkitFilter: value,
- ? ? filter: value,
- ??});
- }? ?
上面的value值類似于'url(#goo)'。
當(dāng)前瀏覽器對在HTML元素上使用 SVG Filters 的支持非常好,可以查看這里。
下面是一些學(xué)習(xí)SVG Filters的好資料,可以學(xué)習(xí)參考:
- 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
應(yīng)用舉例
我們來看看其中的圓形菜單按鈕例子的實現(xiàn)方法:
這種效果的HTML代碼如下:
- ? ?? ???
在HTML中定義一個內(nèi)聯(lián)的SVG對象:
- ??
- ? ?
- ? ?? ?
- ? ?? ?
- ? ?? ?
- ? ?
- ??
- ??
接下來使用如上面所說的CSS filter 屬性來指定filter的路徑和樣式:
- .menu {
- ??/* other styles */
-
- ??-webkit-filter: url("#goo");
- ??filter: url("../menu.html#goo");
- }? ?
下面來分析一些filter,filter的第一步操作是通過feGaussianBlur來模糊對象。
接下來是feColorMatrix過濾器,它在例子中的作用的增強(qiáng)alpha通道,于blur結(jié)合,創(chuàng)建更加強(qiáng)烈的模糊效果。
Learn more about how to apply a color matrix here.
最后,Wilder使某些元素可見,需要在模糊對象只是繪制原始的對象,為了做到這一點(diǎn),我們在atop操作中使用feComposite過濾器。

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

To reduce the size of HTML files, you need to clean up redundant code, compress content, and optimize structure. 1. Delete unused tags, comments and extra blanks to reduce volume; 2. Move inline CSS and JavaScript to external files and merge multiple scripts or style blocks; 3. Simplify label syntax without affecting parsing, such as omitting optional closed tags or using short attributes; 4. After cleaning, enable server-side compression technologies such as Gzip or Brotli to further reduce the transmission volume. These steps can significantly improve page loading performance without sacrificing functionality.

HTMLhasevolvedsignificantlysinceitscreationtomeetthegrowingdemandsofwebdevelopersandusers.Initiallyasimplemarkuplanguageforsharingdocuments,ithasundergonemajorupdates,includingHTML2.0,whichintroducedforms;HTML3.x,whichaddedvisualenhancementsandlayout

It is a semantic tag used in HTML5 to define the bottom of the page or content block, usually including copyright information, contact information or navigation links; it can be placed at the bottom of the page or nested in, etc. tags as the end of the block; when using it, you should pay attention to avoid repeated abuse and irrelevant content.

ThetabindexattributecontrolshowelementsreceivefocusviatheTabkey,withthreemainvalues:tabindex="0"addsanelementtothenaturaltaborder,tabindex="-1"allowsprogrammaticfocusonly,andtabindex="n"(positivenumber)setsacustomtabbing

Adeclarationisaformalstatementthatsomethingistrue,official,orrequired,usedtoclearlydefineorannounceanintent,fact,orrule.Itplaysakeyroleinprogrammingbydefiningvariablesandfunctions,inlegalcontextsbyreportingfactsunderoath,andindailylifebymakingintenti

loading="lazy" is an HTML attribute for and which enables the browser's native lazy loading function to improve page performance. 1. It delays loading non-first-screen resources, reduces initial loading time, saves bandwidth and server requests; 2. It is suitable for large amounts of pictures or embedded content in long pages; 3. It is not suitable for first-screen images, small icons, or lazy loading using JavaScript; 4. It is necessary to cooperate with optimization measures such as setting sizes and compressing files to avoid layout offsets and ensure compatibility. When using it, you should test the scrolling experience and weigh the user experience.

The key to using elements to represent navigation link areas is semantics and clear structure, usually in conjunction with organizational links. 1. The basic structure is to put the parallel links in and wrap them inside, which is friendly to auxiliary tools and is conducive to style control and SEO; 2. Commonly used in or, for placing main navigation or footer link collections; 3. A page can contain multiple areas, such as main menu, sidebar or footer independent navigation.

When writing legal and neat HTML, you need to pay attention to clear structure, correct semantics and standardized format. 1. Use the correct document type declaration to ensure that the browser parses according to the HTML5 standard; 2. Keep the tag closed and reasonably nested to avoid forgetting closed or wrong nesting elements; 3. Use semantic tags such as, etc. to improve accessibility and SEO; 4. The attribute value is always wrapped in quotes, and single or double quotes are used uniformly. Boolean attributes only need to exist, and the class name should be meaningful and avoid redundant attributes.
