CSS3-声波动画

你:声波动画,听起来一点都不厉害,放出来看看啊!
我:好吧,是不厉害。。。可是,你打我呀~你打我呀,哈哈
你:…..

waves

实现方法

HTML

其实,声波就是一个一个的HTML标签(我用的是i,一共25个)。

<div class="waves">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  

一行文字两端对齐

字符大小

<div><label for="">用户名:</label></div>
<div><label for="">性别:</label></div>
<div><label for="">留言内容:</label></div>

例如上面的HTML,如果想让他们看起来像两端对齐的话,怎么办呢?
首先,最长的一行是4个字符,所以把其它行都保证有4个“字符”就可以了,我们在不满4个字符的各个字中间加一个行内标签:

<div><label for="" class="three">用<i></i>户<i></i>名:</label></div>
<div><label for="" 

关于transitionend (二)

再看transitionend事件

在去年,我写过《关于transitionend》一篇文章,说的是如何解决该事件在元素执行多个属性变化时的回调次数问题。今天又用到transitionend事件,于是又想到了一种比较简单的解决方法。

删除transitionend事件

首先,再来看一下问题所在:Demo

上面的例子中,当鼠标经过一个设置了CSS3动画的DIV添加了transitionend事件,这个元素在进行变化的时候同时改变了3个属性,即:widthheight

[翻译]Flexbox完全手册

原文地址

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

译文不一定与原文内容完全相符,有我对其中的一些理解,但不会有太大的出入。

引言

Flexbox是一种更高效更灵活的布局方式,它可以让一些元素在一个容器里很容易的实现各种对齐以及控制这些元素之间的距离,即使这些元素的大小不固定(这也是它为什么叫flex的原因)。

其实Flex布局的主要思想是可以让容器去改变子元素的宽度、高度、顺序以及它们之间的距离等等(当然,这种布局方式针对不同的设备,不同分辨率都是起作用的)。Flex盒子会根据有效的空间去扩展或收缩元素。

比较重要的一点是,…

jQuery中解绑匿名函数

解除事件绑定

给一个元素绑定事件后,再解除绑定,是一个比较常见的操作。

对于有名字的函数,这个操作在jQuery里很简单:

function doAlert(){
  alert("fire!");
}
var doc = $(document);
doc.on("click",doAlert);
doc.off("click",doAlert);

点击查看…

直接购买「JavaScript高级程序设计」

JavaScript高级程序设计

[美] 尼古拉斯·泽卡斯 著

一本包含了所有JavaScript知识的厚书。

直接购买「ES6标准入门」

ES6标准入门

阮一峰 著

前端越来越规范,JavaScript越来越规范了~

直接购买「CSS禅意花园」

CSS禅意花园

[美] Dave Shea / Molly E. Holzschlag 著

没错,就是这本「禅」书让我入的前端坑!

直接购买「CSS世界」

CSS世界

张鑫旭 著

不管你是新手还是资深开发,这本书里都会有你不知道的东西。