snap.svg实现文字遮罩冒泡粒子动画效果代码
代码语言:html
所属分类:动画
代码描述:snap.svg实现文字遮罩冒泡粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Chango' rel='stylesheet' type='text/css'> <style> body { font-family: 'Chango', cursive; background: #dedede; } #svg { height: 200px; width: 800px; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <svg id="svg"></svg> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RequestAnimationFrame.js"></script> <script> var s = Snap('#svg'),circles = [], bg = s.rect(0, 0, 800, 200); bg.attr({ 'fill': '#fff' }); var circleGroup = s.group(bg); // create 200 circles for (var i = 0; i < 200; i++) { var size = Math.random() * 5 + 3, cx = Math.random() * 800, cy = Math.random() * 200, opacity = Math.random(), fill = '#9d77da', counter = Math.random() * 360; circ = s.circle(cx, cy, size); circ.attr({ 'fill'.........完整代码请登录后点击上方下载按钮下载查看
网友评论0