用H5制作水滴特效教程

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 15:27:34

用H5制作水滴特效教程

用H5制作水滴特效教程:給大家?guī)碛肏5制作H5制作水滴特效教程，怎么用H5制作特效？H5制作水滴特效的流程，H5制作水滴特效的注意事項(xiàng)有哪些，一起來看一下。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"&

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀用H5制作水滴特效教程:給大家?guī)碛肏5制作H5制作水滴特效教程，怎么用H5制作特效？H5制作水滴特效的流程，H5制作水滴特效的注意事項(xiàng)有哪些，一起來看一下。<!DOCTYPE html> <html > <head> <meta charset="UTF-8"&

給大家?guī)碛肏5制作H5制作水滴特效教程，怎么用H5制作特效？H5制作水滴特效的流程，H5制作水滴特效的注意事項(xiàng)有哪些，一起來看一下。

<!DOCTYPE html>
<html >
<head>
 <meta charset="UTF-8">
 
 <title>利用canvas 畫布制作逼真的水滴特效</title>
<meta name="keywords" content="利用canvas 畫布制作逼真的水滴特效" />
<meta name="description" content="利用canvas 畫布制作逼真的水滴特效" />
 
 
 <style>
 /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
 body {
 background-color: black;
}
canvas {
 position: absolute;
 top: 0;
 left: 0;
 -webkit-filter: blur( 10px ) contrast( 10 );
 -moz-filter: blur( 10px ) contrast( 10 );
 filter: blur( 10px ) contrast( 10 );
}
 </style>
 
 
</head>
 
<body>
 <canvas id=c></canvas>
 
 <script src="js/index.js"></script>
 
</body>
</html>
Css部分：
body {
 background-color: black;
}
canvas {
 position: absolute;
 top: 0;
 left: 0;
 -webkit-filter: blur( 10px ) contrast( 10 );
 -moz-filter: blur( 10px ) contrast( 10 );
 filter: blur( 10px ) contrast( 10 );
}

相信看了這些案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

用H5制作煙花粒子特效的制作方法

html與xhtml的區(qū)別詳解

網(wǎng)頁的效果圖與DIV+CSS關(guān)系

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com