css3一道闪光】的更多相关文章

<style type="text/css"> .overimg{ position: relative; display: block; /* overflow: hidden; */ box-shadow: 0 0 10px #FFF; } .light{ cursor:pointer; position: absolute; left: -204px; top: 0; width: 204px; height: 250px; background-image: -mo…
在百度音乐 http://music.baidu.com/ 看到这么一个图片效果,当鼠标移上去的时候,会有一道闪光在图片上划过,效果挺酷炫的.于是把这个效果再实现一下:大体思想是,设计一个透明层i,skewx在X轴上做了负25度的变形,背景颜色用的是CSS3的线性渐变linear-gradient,然后hover的时候,设置0.5s的动画时间.同时在 i 层使用 cursor:pointer,如果不设置这个的话,需要等透明层动画之后才能看得到 pointer 指针.打开 fireBUG 调试来看…
距上篇文章,又半个多月过去了,是时候来一发阶段性的总结了. 可能最近比较懒,也可能是想不到写文的主题,故写文已变成越来越艰难的一个任务. 这个系列的大标题,也改了:它从<一个想法>到<一个想法照进现实>,到现在成了<IT连创业系列>,这也算阶段性的进展了. 对于这个系列,我本意它能真实记录创业的整个过程:如现实的困境.跳过的坑.个人的思绪.问题的解决方式等. 这个系列,或多或少,对广大的童鞋来说,应该有一定的借鉴意义,毕竟它是一个真实的创业记录. 创业缺钱即逆境? 还记…
 <Android ListView拉到顶/底部,像橡皮筋一样弹性回弹复位> Android本身的ListView拉到顶部或者底部会在顶部/底部边缘间隙出现一道"闪光"效果,暗示ListView已经到顶/底,不能再动了.  这是Android原生的ListView拉到顶部/底部的一种交互设计.交互设计的可选方案非常多. Android 5.0将ListView的这个交互设计改变成"一片荡漾的光晕". 在众多的交互设计方案中,当中一种交互设计是这种:当…
<p class="overimg"> <a><img src="http://www.nowamagic.net/librarys/images/201402/2014_02_15_01.jpg"></a> <i class="light"></i> </p> .overimg{ position: relative; display: block; /* ov…
原文:http://www.nowamagic.net/librarys/veda/detail/2600 资料参考: http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-linear-gradient.html  CSS3 经典教程系列:CSS3 线性渐变(linear-gradient) HTML <p class="overimg"> <a><img src="http://www.no…
css代码 01 .img { display:block; position: relative; width:800px; height:450px; margin:0 auto;} 02 .img:before { content: ""; position: absolute; width:200px; height: 100%; top: 0; left:-150px; overflow: hidden; 03 background: -moz-linear-gradient…
这个选项调查的特效以选项卡的形式,每答完一道题目自动切换到下一条,颇具特色.使用jQuery和CSS3,适合HTML5浏览器. 效果展示 http://hovertree.com/texiao/jquery/87/ 源码下载:http://hovertree.com/h/bjaf/sym1l16q.htm 效果图如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &…
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的demo页面: 如果对CSS3动画的一些基础概念不是很熟悉,可以参考<CSS3中的动画效果记录>. 一.animate.css库中的相关知识点 从github上面下载下来是一个css文件,文件里面有3000多行代码,大部分的代码还是能看懂的. 但里面的代码还是有很多耐人寻味的地方. 1. 关键帧的选…
前些日子看到了一则新闻,flappybird原作者将携新游戏SwingCopters来袭,准备再靠这款姊妹篇游戏引爆大众眼球.就是下面这个小游戏: 前者的传奇故事大家都有耳闻,至于这第二个游戏能否更加火爆那是后话了.不过我看了作者的宣传视频后,蠢蠢欲动,这么简单的小游戏我山寨一个网页版出来如何?简单思索一下,打算用DOM+CSS3来实现一个.一来强化一个下自己的CSS3知识,二来也探索下用原生DOM来做动画的性能到底如何. 三四天后,原作者的SwingCopters貌似没怎么火起来,看来flap…