美文网首页Web 前端开发 让前端飞
以复选框为中心产生波浪式动画效果

以复选框为中心产生波浪式动画效果

作者: Jason_Zhang_ | 来源:发表于2017-05-05 22:04 被阅读0次

<h4>只需要引入一个id为lanren的div,外加js以及css即可实现这种效果,当然,css3的效果,低版本浏览器下无法实现,尽可能少的代码,方便使用的html css js,才是我们追求的极致!

前言: (写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.)------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.

</h4>
<h5>说明:可以在复选框的任意点击都会出现效果!</h5>
废话不多说,先上效果.


波浪式动画.gif

首先定义一个id为lanren的div.
<pre>
<div id="lanren"></div>
</pre>
第二css也非常简单,自定义一个动画,详情请继续向下看∨

<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>
到了最重要的时候了,最核心的代码,先创建input复选框标签然后添加到div上,..详情请往下面看∨
<pre>
<script>
var RES_X = 20;//横向创建input

var RES_Y = 20;//竖向创建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>
笔没墨了!
欲知详情,下节再讲!!!

相关文章

  • 以复选框为中心产生波浪式动画效果

    只需要引入一个id为lanren的div,外加js以及css即可实现这种效果,当然,css3的效果,低版本浏览器下...

  • IE兼容

    1. 标签元素内文字大小随着动画会有伸缩的效果,添加全局兼容处理: 2. 复选框双击问题 假定复选框初始值为 选中...

  • Android 摇晃动画代码实现技巧

    有两种效果,下边进行详细介绍:效果一:以自身x轴中轴为中心,左右以20°晃动 效果二:以自身x轴中轴为中心,左右平...

  • HTML动画

    通过CSS实现网页中动画效果的展示,以View的放大缩小为例: change:为动画名称

  • 以学生为“中心”,设计课程

    一、什么是以学生为“中心”? 借用一句话,以学生的发展为中心,以学生的学习为中心,以学生的学习效果评价为中...

  • 练习瑜伽的五大障碍

    ①无知 ②自我中心 ③执着 ④憎恶 ⑤坚守 由于自我的无知,产生了以自我为中心的本位主义;由于以自我为中心,而对事...

  • ios动画学习

    1、默认的Layer都是有隐式的动画的,修改属性会产生动画的效果,而UIView设置属性的时候不会产生动画的效果,...

  • 逐帧动画解析

    帧动画通过顺序播放一系列图像从而产生动画效果,可以简单理解为图片切换动画,很显然,如果图片过多过大就会导致OOM。...

  • vue.js动画中的js钩子函数

    在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。 以实现击球效果为例: 具...

  • 2018-05-04

    动画 Android 动画分类(针对view控件的动画) 传统动画 帧动画 从而在视觉上产生一种动画的效果;有点类...

网友评论

    本文标题:以复选框为中心产生波浪式动画效果

    本文链接:https://www.haomeiwen.com/subject/vowstxtx.html