摘要：考察下面的 HTML 代码片段： <div> <section>section 1</section> <section>section 2</section> <ul> <li>item 1</li> 阅读全文

摘要：CSS中存在一个神秘的变量，少有人知自然也不怎么为人所用。它就是`crrentColor`变量（或者说是CSS关键字，但我觉得称为变量好理解些）。# 初识它是何物？具有怎样的功效？它从哪里来？带着这些疑问我们继续。下面是来自[MDN的解释](https://developer.mozilla.org... 阅读全文

摘要：.Net开发者一定熟悉下面这个画面：这就是宇宙第一IDE Visual Studio的启动画面，学名叫Splash Screen（或者Splash Window）。同样，Javar们一定对Eclipse的启动画面不会陌生。不只是IDE，很多桌面程序都会有这个Splash 窗口，在程序进行初始化时显示... 阅读全文

摘要：前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address 阅读全文

摘要：我们将要达到的是如下的效果(若效果未出现请刷新)：分析主要还是运用CSS3的transition, animation, transform还有渐变背景等特性。由于按钮在鼠标进入时有不同的样式，所以要对其:hover状态运用另外的背景样式通过对按钮的:after状态添加一个内容为空的元素，并给其一个边框，这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出，就得到我们看到的效果了构建基本按钮样式做为例子，我们的页面会很简单，就放一个a标签作为按钮，然后对其写样式让它看起来更像一个按钮。并定义好:after元素。 Fake Button添加动画首先用keyframes定义动画@-webkit... 阅读全文

摘要：带平行视差效果的星星先看效果：如果下方未出现效果也可前往这里查看http://sandbox.runjs.cn/show/0lz3sl9y下面我们利用CSS3的animation写出这样的动画来，要点就是：用动画不停改变背景图片位置;动画高为无限循环;在页面放三个DIV，首先将他们大小铺满整个窗口，这点是通过将其position设为absolute然后分别设置上左下右四个方面距离为0px达到的。 Moving stars 然后定义的们的动画，让背景图片的位置从开始的0%变化到600%，注... 阅读全文

摘要：本文只是讨论和实现了动画效果，并未将动画与页面实际下载关联，有朋友们问如何应用，可以使用现成的一些插件比如这个，这个，还有这个。之前一篇文章《CSS3 动画一瞥》简单介绍了CSS3动画相关的内容，这里继续讲一个例子。前些时候有注意到YouTube网站放出的新特性，那就是在视频页面间切换时，页面顶部会有一道华丽丽的红色激光脉冲掠过。那不是其他什么为了炫技的东西，它是一个进度条，平时我们见了千百遍经常以转圈形式出现的进度条。当然谷歌对于进度展示的创新不止于此啦，比如用于谷歌加的下载gif也是很有新意的一个玩意儿。但YouTube这个进度条似乎更具创新，让人觉得相当惊艳。所以好奇的我按捺不住想要拔开 阅读全文

摘要：伴随HTML5而来的CSS3让前端大湿们可以用简单的CSS样式即可写出动画效果来，而在这之前，一提到动画我们可能会想到JavaScript，Flash，Java插件等。如果是用JavaScript那倒也不是很糟糕的事啦，但如果写出来的效果非要强迫客户端安装第三方插件才能显示，毕竟不是很理想。这也就是为什么谷歌会不遗余力地推广他所主导的开源项目WebRTC （Web Real-Time Communication），把实时通讯的功能都做进浏览器，像视频通话这样的高级应用直接在JavaScript里调用几个浏览器API即可实现！这在以前想都不敢想。再加上HTML5将很多之前需要依赖外部程序或者需要 阅读全文

摘要：很多时候我们需要追求完美，这是种职业道德，更是种鞭策，不然你做出来的东西会像本文里面提到的那个移动公司的产品一样有缺憾。 本文介绍了如何将验证消息放到表单内容的上层而不影响下面内容的布局。 阅读全文