程序员一段代码居然写出了6个效果，js代码只有30行

效果一

效果二

效果三

效果四

代码

如果想学习更多的web特效以及特效源码可以【私信】小编【学习】会自动回复学习地址和2018精品教程免费领取地址

html代码

<div class="box" id="rejection"></div>

<div class="box" id="inattentive"></div>

<div class="box" id="mnemonics"></div>

<div class="box" id="phonological">

</div><div class="box" id="estimate"></div>

<div class="box" id="dyslexia"></div>

<div class="box" id="incomprehension"></div>

css代码

body,

html {

background-color: #ddd;

margin: 0px;

height: 100%;

overflow-x: hidden;

overflow-y: auto;

}

.grid {

display: grid;

width: 50%;

height:500%;

grid-template-columns: 33% 33% 33%;

grid-template-rows: 33% 33% 33%;

grid-gap: 0.5%;

background-color: #fff;

}

.box {

background-color: #444;

color: #fff;

padding: 4px;

}

js代码：

var animations = [

"rejection",

"inattentive",

"mnemonics",

"phonological",

"estimate",

"dyslexia",

"incomprehension",

];

var i,

len = animations.length;

for (i = 0; i < len; i += 1) {

var anim;

var elem = document.getElementById(animations[i]);

var animData = {

container: elem,

renderer: "svg",

loop: true,

autoplay: true,

rendererSettings: {

progressiveLoad: true,

preserveAspectRatio: "xMidYMid meet"

},

path:

"https://labs.nearpod.com/bodymovin/demo/al_boardman/articulation/" +

animations[i] +

".json"

};

anim = lottie.loadAnimation(animData);

anim.setSubframe(false);

}