js实现背景动画分裂

2020-11-27 来源：华佗小知识

js实现背景动画分裂，免费提供源码，有兴趣的朋友可以直接拿去研究研究，来帮助js知识的升华，更多关于js的源码或者教程请到PHP中文网自行搜索~~

X$DY]2N91G}]_E_O4V@QOX2.png

代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>PHP中文网</title>
 <style>
 .container{
 margin: 100px auto;
 width: 500px;
 height: 500px;
 line-height: 0;
 font-size: 0;
 }
 .container p{
 width: 100px;
 height: 100px;
 background-image: url("http://www.gxlcms.com/tpl/Index/Static/img/banner4.jpg");
 /*background-repeat: no-repeat;*/
 display: inline-block;
 position: relative;
 top: 0;
 left: 0;
 transition: all 0.5s;
 }
 .container p:nth-of-type(3){

 }
 </style>
</head>
<body>
<p>
</p>
<script>

 var ps = [];
 var container = document.getElementsByClassName("container");


 for (var i = 0; i < 25; i ++) {
 var num = Math.floor(Math.random()*200 - 100);
 ps.push(document.createElement("p"));
 ps[i].style.top = num + "px";
 ps[i].style.left = num + "px";
 ps[i].style.backgroundPosition = -i%5*100 + "px " + -Math.floor(i/5)*100 + "px";
 console.log(ps[i].style.backgroundPosition);
 container[0].appendChild(ps[i]);
 }

 container[0].onmouseenter = function () {
 for (var i = 0; i < 25; i ++) {
 ps[i].style.top = 0 + "px";
 ps[i].style.left = 0 + "px";
 }
 };
 container[0].onmouseleave = function () {
 for (var i = 0; i < 25; i ++) {
 var num = Math.floor(Math.random()*200 - 100);
 ps[i].style.top = num + "px";
 ps[i].style.left = num + "px";
 }

 }
</script>
</body>
</html>

以上是动画分裂的源码，有兴趣的可以拿去研究研究，更多源码和精彩的教程请到PHP中文网浏览哦~~

全部频道

js实现背景动画分裂