几个移动端常用的 CSS 属性

最近在写一个移动端的页面,为了页面上的一些细节,找到了几个 CSS 属性,做个笔记。/* 弹性滚动 */ -webkit-overflow-scrolling: touch; /* 移除元素的默认样式,例如 iOS 中的圆形按钮 */ -webkit-appearance: none; /* 屏蔽长按选择文字,但使用不当会影响文本框输入 */ -webkit-user-select: n...

说说 CSS 3 动画以及 steps() 函数

如今 CSS 3 动画已经非常常见,网上关于 CSS 3 动画的介绍也不少,但大多数都没提及 steps() 这个函数,甚至包括国内版的 w3school 更是压根没列出来。最近在制作 Miss.cat 网站的 loading 动画时,尝试了一下该函数,发现还蛮实用的。什么是动画当然这里要说的不是详细表述怎样称为「动画」,而是要先弄清楚一个概念:在 CSS 3 中哪部分是一个动画的过程。我们...

利用 CSS 3 的 flexbox 轻松实现自适应居中

以前要做个屏幕居中的效果,可能都会使用 position 绝对定位的方式来做。但随着元素尺寸不固定问题越来越常见,这个方法的弊端也就越来越明显。最近尝试了一下 CSS 3 中的新特性 Flexbox 弹性伸缩布局的概念,发现通过这个方法实现屏幕居中太方便了,并且内容尺寸随便改都不会影响居中的效果。简单的做了一个很生动的例子,不同身材的小黄人都居中了。我们来看看代码:html { h...

代替 touchenter 的 elementFromPoint() 大法

在 PC 端上做前端开发的时候,为了检测鼠标经过哪个元素,经常会用到 mouseover 事件。但是在移动端上,原本 w3 标准中有的 touchenter 事件却在新标准中被移除,目前主流的浏览器也只支持 touchstart,touchmove,touchend 和 touchcancel 四个事件。这两天在做一个小游戏的时候,为了解决触摸划过的流畅性,又再次研究了这个问题。在 Stac...