给大家带来用H5制作H5制作水滴特效教程,怎么用H5制作特效?H5制作水滴特效的流程,H5制作水滴特效的注意事项有哪些,一起来看一下。
<!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 ); }
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
以上是用H5制作水滴特效教程的详细内容。更多信息请关注PHP中文网其他相关文章!