html5使用svg绘制的笑脸动画特效源码.zip资源-CSDN文库

共4个文件

js：3个

html：1个

版权申诉

html5

70 浏览量 2022-11-04 23:42:25 上传评论收藏 66KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

html5使用svg绘制的笑脸动画特效源码.zip （4个子文件）

132686867552197223

raphael-min.js 89KB

jquery.lazylinepainter-1.4.min.js 3KB

index.html 2KB

jquery-1.9.1.min.js 90KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jquery路径动画插件</title> <style> body { background:#fffafa } #demo { width:349px; height:277px; position:absolute; left:50%; margin:80px 0 0 -175px; } </style> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="raphael-min.js"></script> <script type="text/javascript" src="jquery.lazylinepainter-1.4.min.js"></script> <script type="text/javascript"> (function( $ ){ var svgData = { "demo" : { "strokepath" : [ { "path": "M7.603,5.5 c0,0,10.298,24.07,33.517,24.07c23.221,0,33.519-24.07,33.519-24.07s9.142,24.07,33.513,24.07c24.372,0,33.515-24.07,33.515-24.07 s10.858,24.07,33.518,24.07S208.703,5.5,208.703,5.5s9.717,24.07,33.521,24.07c23.801,0,33.518-24.07,33.518-24.07 s13.828,24.07,33.524,24.07c19.698,0,33.524-24.07,33.524-24.07", "duration": 1500, "strokeColor": '#c07775', "strokeWidth": 8 }, { "path": "M120,139.129 c0,0-8.708-34.233-42.483-34.236c-28.724-0.001-42.493,34.23-42.493,34.23", "duration":300 }, { "path": "M313.5,137.138 c0,0-12.209-32.137-39.746-32.138C246.216,104.999,234,137.132,234,137.132", "duration":300 }, { "path": "M80.246,193.604 c0,0,21.399,74.387,93.074,74.387c76.026,0,93.095-74.387,93.095-74.387", "duration":500 } ], "dimensions" : { "width": 349, "height":277 } } } $(document).ready(function(){ // Setup your Lazy Line element. // see README file for more settings $('#demo').lazylinepainter({ 'svgData' : svgData, 'strokeWidth':7, 'strokeColor':'#dc908e', 'onComplete' : function(){ $(this).animate({'marginTop':60},500); } } ) // Paint your Lazy Line, that easy! $('#demo').lazylinepainter('paint'); }) })( jQuery ); </script> </head> <body> <div id='demo'></div> </body> </html>

评论收藏

内容反馈

版权申诉