知乎的全网置灰css代码
<style> :-webkit-full-screen { -webkit-filter: grayscale(1);   …
分类目录归档: html5+css3
input表单step先加1再加step的值的bug
众所周知，当input type=“number”时，设置可以设置step属性来设置每次增减的值。但今天遇到一个奇葩问题，就是设置step属性之后，点击增加按钮，input的值是先增加1，然后再点击增加按钮才按照step的值来增减。 比如：<input type=”number” name …
html各标签语义大全
节元素标签 header元素 header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。 整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个hea …
Native与H5交互的那些事
前言 在混合式开发中，现在出现的bug有时候就不是单纯的前端的问题，也有可能是native的问题，所以要懂得甄别筛选排除。那么今年由@郑晓勇带来native app与webview交互的那些事，让我们知道为什么？ 正文从这开始～ Hybrid开发模式目前几乎每家公司都有涉及和使用，这种开发模式兼具良好的Native用户 …
通过浏览器的渲染原理了解CSS的性能优化
平时我们几乎每天都在和浏览器打交道，写出来的页面很有可能在不同的浏览器下显示的不一样。苦逼的前端攻城师们为了兼容各个浏览器而不断地去测试和调试，还在脑子中记下各种遇到的BUG及解决方案，而我们好像并没有去主动地关注和了解下浏览器的工作原理。如果我们对此做一点了解，我想在项目过程中就可以根据它有效的避免一些问题以及对页面 …
web前端冷知识
浏览器地址栏运行JavaScript代码 这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。 示例代码： javascript:alert(‘hello from address bar :)’); 将以上代码贴到浏览器地址栏回车后aler …
关于transform：Matrix()偏移缩放后的坐标问题
首先先简单说一下transform：Matrix()各参数的含义： transform: matrix(a,b,c,d,e,f); a、d控制缩放，b、c控制旋转，e、f控制位移。 其中ef能够直接影响元素的坐标，缩放间接影响坐标，旋转对坐标没有影响。 所谓坐标X,Y其实就是元素的left跟top的值。transfor …
css3动画是否结束监听事件
css3动画是否结束监听事件： var domObj = $(“#id”); domObj [0].addEventListener(“webkitAnimationEnd”, function(){ this.className = this.className.rep …
CSS命名规范及常用命名
一、命名规则说明： 1）、所有的命名最好都小写 2）、属性的值一定要用双引号(“”)括起来，且一定要有值如class=”divcss5″,id=”divcss5″ 3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整 4）、空元素要有结 …
js+div还原80后怀旧经典赛车游戏 谁说html5动画非得用canvas？
两年之后再回来看，这都写的啥狗屎玩意儿。。。那时候都不会用回调，而且setTimeout嵌套setTimeout都是些什么鬼。。。 渲染慢是因为赛车移动的时候更改的margin-top，改成transform: translate来修改位置会流畅很多；音频问题、震动问题随着手机的不断升级，效果也越来越好。 不过也懒得改 …