有哪些前端特效学习的网站

一、有哪些前端特效学习的网站

1、一、CodePen，网址： codepen.io/，一个在线的前端开发社区，提供了丰富的前端特效、动画和交互效果的展示和分享平台。

2、二、Animate.css，网址： daneden.github.io/anima...，一个跨浏览器的动效基础库，提供从经典到独特的各种动效解决方案。

3、三、Anime.js，网址： animejs.com/，一款强大的使用JS开发的动效库，支持 CSS，DOM，SVG，和JS对象。

4、四、Popmotion，网址： popmotion.io/，用于UI界面的JavaScript动画库，包含四个强大的开源工具。

5、五、Dynamics.js，网址： dynamicsjs.com/，提供9种标准的物理动效，可制定持续时间、频率等数据。

6、六、Bounce.js，网址： bouncejs.com/，可直接在浏览器中进行设计和设置的动画库，提供网页构建器和CSS代码生成功能。

7、七、Lazy Line Painter，网址： lazylinepainter.info，用于SVG路径动画的JQUERY插件，提供SVG路径动效创建和编辑功能。

8、八、Vivus.js，网址： vivus.js- svg animation，轻量级的JavaScript动效库，用于创建SVG路径动画。

9、九、CSShake，网址： elrumordelaluz.github.io...，提供11类不同可控动效属性的疯狂摇动动效库。

10、十、Codrops，网址： tympanus.net/codrops/，专注于前端特效和动画的网站，提供免费资源包括代码示例、教程和演示。

二、怎么给html5背景加上js粒子特效

particles.js可以从github网站下载到最新的源码，网址是

第一步，在html中引入脚本文件 particles.min.js，这个文件在下载的压缩包里可以找到

<scriptsrc="particles.min.js"></script>

第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。

第二步，在html中放入一个div容器，设置id为particles-js。这个一般放在所有网页元素的最后面就可以。

<divid="particles-js"></div>

</style>

第三步，设置窗口样式

}</style>

第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。

第四步，脚本生成粒子效果，可以单独放在一个js文件里，也可以放在<script>标签里。无论如何，这段脚本要出现在div容器之后。

particlesJS("particles-js",{"particles":{"number":{"value":380,"density":{"enable":true,"value_area":800

},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"

},"image":{"src":"img/github.svg","width":100,"height":100

},"opacity":{"value":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false

},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false

},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1

},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200

},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"grab"

},"onclick":{"enable":true,"mode":"push"

},"modes":{"grab":{"distance":140,"line_linked":{"opacity":1

},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3

},"repulse":{"distance":200,"duration":0.4

},"retina_detect":true});

三、网站JS放大图片

1、<title>emu</title>

2、<img src=[pp.jpg onmousemove="zoom()" id=srcImg>

3、<div style="overflow:hidden"><img id=zoomImg></div>

4、<SCRIPT LANGUAGE="javascript">

5、srcImg.height= srcImg.height/2;

6、zoomImg.height= srcImg.height*zoomRate;

7、zoomImg.parentNode.style.width= srcImg.width;

8、zoomImg.parentNode.style.height= srcImg.height;

9、h= elm.offsetHeight/zoomRate/2;

10、w= elm.offsetWidth/zoomRate/2;

11、var x= event.x-elm.offsetLeft;

12、x=x<(elm.offsetWidth-w)?x<w?w:x:elm.offsetWidth-w;

13、zoomImg.style.marginLeft=(w-x)*zoomRate;

14、y=y<(elm.offsetHeight-h)?y<h?h:y:elm.offsetHeight-h;

15、zoomImg.style.marginTop=(h-y)*zoomRate;

16、这个是随鼠标移动查看放大图片响应的是onmousemove事件

17、可自定义CSS样式，控制jQuery插件jQuery Image Flyout提示小图片显示效果。

18、<script src="jquery.js" type="text/javascript"></script>

19、<script src="jquery.flyout.js" type="text/javascript"></script>

20、<script src="jquery.easing.js" type="text/javascript"></script>

21、二，HTML部分(DIV层内所用图片链接)

22、<div>jQuery插件flyout弹出图片</div>

23、<a href="iphone.jpg" title="jquery.flyout"><img src="iphone_small.jpg" alt="iphone"/></a>

24、三，Javascript部分(jQuery插件jQuery Image Flyout弹出图片调用)

25、<script type="text/javascript">

26、实例中将ID为biuuu的DIV内所有链接元素<a>增加javascript弹出放大图片功能，其中链接href部分为表示弹出的大图片路径。使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。

27、$(#biuuu a).flyout({loadingSrc:thumb-loading.gif,outEase:easeInCirc,inEase:easeOutBounce});

28、loadingSrc表示预加载提示图片路径

29、outEase表示弹出图片放大过程使用的jQuery插件Easing Plugin特效，如：easeInCirc

30、inEase表示弹出图片缩小过程使用的jQuery插件Easing Plugin特效，如：easeOutBounce

31、二，自定义弹出图片后图片显示样式

32、$(#biuuu a).flyout({loadingSrc:thumb-loading.gif,outEase:easeOutQuad,inEase:easeInBack,loader:loader2,widthMargin:300,heightMargin:300});

33、loader表示弹出图片后调用的CSS样式

34、widthMargin表示弹出图片后显示的margin宽度

35、heightMargin表示弹出图片后显示的margin高度

36、jQuery插件jQuery Image Flyout弹出图片可自定义定制丰富的图片效果