canvas实现鼠标跟随魔法棒粒子动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas实现鼠标跟随魔法棒粒子动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='40' height='40' style='enable-background:new 0 0 40 40' version='1.1' viewBox='0 0 40 40'%3E%3Cstyle%3E.st0%7Bfill:%23fcbace%7D.st1%7Bfill:%23271937%7D.st2%7Bfill:%23f9f0f1%7D.st3%7Bfill:%23fffe45%7D.st5%7Bfill:%23f7fff2%7D.st6%7Bfill:%239b4e08%7D%3C/style%3E%3Cpath d='M7.5 2.3C8.5 2 13 0 13.7.4c.1.1.1.4 0 .5-.1 1.7-.5 3.3-.9 5 1.2 1 2.3 2 3.5 3.1.3.3.8.7 1.1 1 .1.1.1.1.1.2v.1c-.4.1-.9.1-1.4.2-.9.1-1.9.2-2.8.3h-.9c-.2.2-1 .6-1.2.8v.1H11c0 .1 0 .2-.1.4-.1.3-.1.8-.1 1-.1.5-.4 2.5-.6 2.9v.1-.1h-.1c-.2 0-.4-.3-.6-.4-.4-.3-.8-.7-1.2-1-.4-.4-.7-.8-1.1-1.3-.3-.4-.7-.8-1-1.2-.4.1-.9.1-1.3.1s-.9.1-1.3.2c-.5 0-1 .1-1.4.1-.6 0-1.3.2-1.9.1 0 0-.1-.1-.2-.1C-.2 11.9 2 7.8 2.4 7c.1-.2.1-.2 0-.4C2 5.9.4 1.6.6 1 .6.9.6.9.7.9c.3-.1 2.7.3 3.2.4.3.1.7.2 1 .2.3.1.5.1.8.2.5.2 1.3.4 1.8.6z'/%3E%3Cpath d='m2.6 6.5.1.2c.3 0 .7-.1 1 0-.1.3-.3.7-.5 1-.2.7-.6 1.3-1 2-.4.6-.8 1.2-1.3 1.8-.2.3-.5.5-.7.8.2.1.4 0 .6 0 .6 0 1.1-.1 1.7-.2.6-.1 3.2-.3 3.5-.4.1 0 .1-.1.1-.2h.1c0 .1-.1.2-.1.3.1.3.5.6.7.9.3.4.7.9 1 1.3.4.5.9.9 1.3 1.4.2.2.4.4.6.5l.1.1h-.1c-.2 0-.4-.3-.6-.4-.4-.3-.8-.7-1.2-1-.4-.4-.7-.8-1.1-1.3-.3-.4-.7-.8-1-1.2-.4.1-.9.1-1.3.1s-.9.1-1.3.2c-.5 0-1 .1-1.4.1-.6 0-1.3.2-1.9.1 0 0-.1-.1-.2-.1.1-.6 2.3-4.7 2.7-5.5.1-.2.1-.2 0-.4.1 0 .1 0 .2-.1z' class='st0'/%3E%3Cpath d='m2.6 6.5.1.2c.3 0 .7-.1 1 0-.3.1-.7.2-1 .3-.3.6-2.5 4.9-2.4 5.3.2.1.4 0 .6 0 .6 0 1.1-.1 1.7-.2.6-.1 3.2-.3 3.5-.4.1 0 .1-.1.1-.2h.1c0 .1-.1.2-.1.3.1.3.5.6.7.9.3.4.7.9 1 1.3.4.5.9.9 1.3 1.4.2.2.4.4.6.5l.1.1h-.1c-.2 0-.4-.3-.6-.4-.4-.3-.8-.7-1.2-1-.4-.4-.7-.8-1.1-1.3-.3-.4-.7-.8-1-1.2-.4.1-.9.1-1.3.1s-.9.1-1.3.2c-.5 0-1 .1-1.4.1-.6 0-1.3.2-1.9.1 0 0-.1-.1-.2-.1 0-.6 2.2-4.7 2.6-5.5.1-.2.1-.2 0-.4.1 0 .1 0 .2-.1z' class='st1'/%3E%3Cpath d='M2.6 6.5c-.4-.8-.7-1.6-1-2.4-.4-1-.8-1.9-1-3 .6.7 1.2 1.8 1.6 2.7.5.9 1 1.9 1.4 2.9h-1v-.2zM.3 12.3c.3-.1.6-.3 1-.4.4-.1.8-.2 1.1-.3l2.2-.6c.6-.1 1.2-.4 1.8-.5.1.2-.1.7-.2.9 0 .1 0 .2-.1.2-.3.1-3 .3-3.5.4-.6.1-1.1.1-1.7.2-.1.2-.4.2-.6.1zM6.6 10.8c.4.6.9 1.1 1.3 1.7.4.5.8 1 1.1 1.6.4.6.7 1.2 1 1.8-.2-.1-.4-.3-.6-.5-.5-.5-1-.9-1.4-1.4-.4-.4-.7-.9-1-1.3-.2-.3-.6-.6-.7-.9 0-.1 0-.2.1-.3.1-.2.1-.5.2-.7zM10.7 10.5c.5.1.9.1 1.4.2-.2.1-.5.3-.7.4-.2.1-.4.3-.4.5 0 .1 0 .2-.1.4-.1.3-.1.8-.1 1-.1.5-.4 2.5-.6 2.9-.2-.8.1-1.9.2-2.7.1-.9.1-1.8.3-2.7z' class='st0'/%3E%3Cpath d='M6.9 10.5c-.4-.1-.8-.2-1.2-.5-3-1.9-1.2-6.7 2.4-6.4 1.6.2 3.1 1.4 3.3 2.9.5 2.6-2.1 4.6-4.5 4z' class='st2'/%3E%3Cpath d='M7.7 4.4H8.6s.1 0 .1.1c0 0 .1 0 .1.1 0 0 .1 0 .1.1 0 0 .1 0 .1.1 0 0 .1 0 .1.1.4.1.4.1.5.1l.1.1.1.1.1.1.1.1.1.1.1.1.1.1s0 .1.1.1c0 0 0 .1.1.1 0 0 0 .1.1.1 0 0 0 .1.1.1V7.6s0 .1-.1.1c0 0 0 .1-.1.1 0 0 0 .1-.1.1 0 0 0 .1-.1.1l-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1-.1.1s-.1 0-.1.1c0 0-.1 0-.1.1 0 0-.1 0-.1.1 0 0-.1 0-.1.1H7.5s-.1 0-.1-.1c0 0-.1 0-.1-.1 0 0-.1 0-.1-.1 0 0-.1 0-.1-.1 0 0-.1 0-.1-.1l-.1-.1-.1-.1-.1-.1c-.8.6-.9.6-.9.6l-.1-.1-.1-.1-.1-.1-.1-.1s0-.1-.1-.1c0 0 0-.1-.1-.1 0 0 0-.1-.1-.1 0 0 0-.1-.1-.1V6.7s0-.1.1-.1c0 0 0-.1.1-.1 0 0 0-.1.1-.1 0 0 0-.1.1-.1l.1-.1.1-.1.1-.1.1-.1.1-.1.1-.7.1-.1.1-.1s.1 0 .1-.1c0 0 .1 0 .1-.1 0 0 .1 0 .1-.1 0 0 .1 0 .1-.1h.6c.4-.1.4-.1.5-.1z'/%3E%3Cpath d='M9 4.9c.1.1-.2 1.6-.2 1.9.6.3 1.1.6 1.7.9-.7.1-1.3.1-1.9.1-.2.6-.2 1.2-.5 1.7-.2-.5-.4-1.1-.6-1.7h-2c.5-.3 1-.6 1.5-1-.2-.5-.7-1.1-1-1.6.6.2 1.1.6 1.7.9.5-.4.8-.8 1.3-1.2z' class='st3'/%3E%3Cpath d='M7.2 8c.3.2.6 1.2.7 1.6-.5-.1-.9-.2-1.3-.4-.6-.3-.9-.7-1.2-1.2.6.1 1.2.1 1.8 0zM5.8 5.4c.2.1.8 1.1 1 1.4-.3.2-.7.4-1 .7-.2.1-.3.2-.5.3-.1-.2-.1-.3-.1-.5-.1-.7.2-1.4.6-1.9zM10.3 7.8c.1 0 .1 0 0 0 .1 0 .1 0 0 0 .1.1 0 .3-.1.4-.4.8-.9 1.1-1.8 1.3h-.1c0-.2.3-1.3.4-1.5l1.6-.2zM9.2 5c.6.3 1 1.1 1.2 1.7.1.2.2.6.1.7h-.1c-.5-.2-1-.5-1.4-.8.1-.5.1-1.1.2-1.6zM7.8 4.7c.3 0 .7.1 1 .1l-1.1 1c-.1 0-.2-.1-.3-.1l-1.2-.6c.5-.3 1-.4 1.6-.4z' class='st2'/%3E%3Cpath d='M11.1 9.3c.6.1 1.2.1 1.8.1 1 .1 2 .1 3 .4.4.1.8.2 1.1.4-.7.1-1.4.1-2 .1-.7.1-1.3.1-2 .1-.6 0-1.2 0-1.8-.1-.3 0-.6-.1-1 0h.1c.1 0 .1 0 .2.1 0 .4-.1.9-.2 1.3-.1 1.1-.3 2.1-.4 3.2-.4-1.4-.5-2.9-.8-4.4.9-.1 1.5-.6 2-1.2zM11.8 7c.2 0 .4 0 .6.1.5.3 1 .7 1.5 1.1L16 9.7l-.4-.1c-1.4-.3-2.9-.3-4.3-.5.3-.7.4-1.3.5-2.1zM3.8 7.1c.1.2.1.5.2.7.1.6.4 1.1.8 1.5-1.2.8-2.4 1.6-3.5 2.4-.3.1-.5.3-.8.5.3-.4.6-.7.9-1.1 1-1.3 1.7-2.6 2.4-4zM1.2 1.4c.3 0 .7.3 1 .4.2.1.5.2.7.3l2.8.9c.5.2 1.1.3 1.6.5-.3.2-.6.2-1 .3-.5.2-.9.5-1.4.8L4 3.7c-.9-.9-1.8-1.6-2.8-2.3z' class='st0'/%3E%3Cpath d='M13.5.6c.1 0 .1 0 0 0 .1.1 0 .7 0 .9-.3 1.9-.7 3.7-1.1 5.6-.2 0-.3-.1-.5-.1-.1 0-.1-.1-.1-.1-.1-.3-.2-.7-.3-1 .3-1 .7-2 1.1-3 .2-.7.4-1.3.7-1.9 0-.2.1-.3.2-.4zM1 1.3c.2.1.3.3.5.4.2.2.5.4.7.6.9.7 1.8 1.5 2.7 2.4-.4.4-.7.8-.8 1.3-.1.2-.2.5-.2.8-.1-.3-.2-.6-.4-1C3.1 4.7 1.8 2.1 1 1.3zM6.5 10.5c.1 0 .2.1.4.1.1 0 .3.1.4.1.4.2 1.3.1 1.7 0 .1.7.2 1.4.4 2.1.1.8.3 1.6.5.........完整代码请登录后点击上方下载按钮下载查看
网友评论0