<h4>只需要引入一個(gè)id為lanren的div，外加js以及css即可實(shí)現(xiàn)這種效果,當(dāng)然罕拂，css3的效果仰剿，低版本瀏覽器下無(wú)法實(shí)現(xiàn),盡可能少的代碼，方便使用的html css js,才是我們追求的極致!

前言: (寫在文前的只言片語(yǔ)另绩、意書情殤)長(zhǎng)歌破曉穿云過(guò),響徹碧霄振九天.)------Jason Zhang
web開發(fā)已現(xiàn)世多年,技術(shù)成熟且學(xué)習(xí)平臺(tái)廣泛,筆者針對(duì)其中細(xì)節(jié)從本質(zhì)上進(jìn)行解釋.力求透徹.

</h4>
<h5>說(shuō)明:可以在復(fù)選框的任意點(diǎn)擊都會(huì)出現(xiàn)效果!</h5>
廢話不多說(shuō),先上效果.

波浪式動(dòng)畫.gif

首先定義一個(gè)id為lanren的div.
<pre>
<div id="lanren"></div>
</pre>
第二css也非常簡(jiǎn)單,自定義一個(gè)動(dòng)畫,詳情請(qǐng)繼續(xù)向下看∨

<pre>
.wrapper{ overflow:hidden; margin:0 auto; position:relative;}
.wrapper input{position:absolute}
.wrapper input.grow{-webkit-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);-moz-animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275);animation:grow 0.8s cubic-bezier(0.175,0.885,0.32,1.275)}
@-webkit-keyframes grow{
0%{-webkit-transform:scale(1)}
30%{-webkit-transform:scale(2.5)}
100%{-webkit-transform:scale(1)}
}
@-moz-keyframes grow{
0%{-moz-transform:scale(1)}
30%{-moz-transform:scale(2.5)}
100%{-moz-transform:scale(1)}
}
@keyframes grow{
0%{transform:scale(1)}
30%{transform:scale(2.5)}
100%{transform:scale(1)}
}
</pre>
到了最重要的時(shí)候了,最核心的代碼,先創(chuàng)建input復(fù)選框標(biāo)簽然后添加到div上,..詳情請(qǐng)往下面看∨
<pre>
<script>
var RES_X = 20;//橫向創(chuàng)建input

var RES_Y = 20;//豎向創(chuàng)建input
var SIZE = 22;
if (/iphone|ipad|android/ig.test(navigator.userAgent)) {
RES_X = 10;
RES_Y = 10;
SIZE = 25
}
var entities = [];
var wrapper = document.getElementById('lanren');
wrapper.className = 'wrapper';
wrapper.style.width = (RES_X * SIZE) + 'px';
wrapper.style.height = (RES_Y * SIZE) + 'px';
for (var x = 0; x < RES_X; x++) {
for (var y = 0; y < RES_Y; y++) {
var el = document.createElement('input');
el.setAttribute('type', 'checkbox');
wrapper.appendChild(el);
var entity = {
element: el,
x: x * SIZE,
y: y * SIZE
}
el.style.left = entity.x + 'px';
el.style.top = entity.y + 'px';
el.addEventListener('change', this.toggle.bind(this, entity));
entities.push(entity)
}
}
function toggle(targetEntity) {
var checked = targetEntity.element.checked;
entities.forEach(function(entity) {
var dx = targetEntity.x - entity.x;
var dy = targetEntity.y - entity.y;
var distance = Math.sqrt(dx * dx + dy * dy);
setTimeout(function() {
entity.element.checked = checked;
entity.element.className = '';
entity.element.offsetWidth;
entity.element.className = 'grow'
}, Math.round(distance * 1.8))
})
}
setTimeout(function() {
entities[0].element.checked = true;
toggle(entities[0])
}, 800);
</script>
</pre>
筆沒(méi)墨了!
欲知詳情,下節(jié)再講!!!