- 博客(36)
- 资源 (4)
- 收藏
- 关注
原创 为什么写博客?
希望通过博客这个平台记录自己的学习进程,反思学习心得,提高自己,同时可以帮助到别人,善莫大焉!希望自己可以坚持,坚持走自己的路,坚持到底!
2014-02-26 13:27:35 2065
原创 CreateJS奥运五环动画
索契奥运会结束了,今天给大家看一个利用CreateJS实现的奥运五环动画,在线把玩请点这里,下载收藏请戳这里。
2014-02-25 20:39:49 4952 12
原创 纯CSS实现倒计时动画
OK,CSS3演武场今天继续,我们重点来看看css3 animation实现逐帧动画,额,按照惯例,看效果点这里,下载戳这里。实现原理a.外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。b.内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束,外盒子动画消失掉。
2014-02-25 10:13:43 17408 1
原创 可控制的CSS3D盒子动画
今天来看一个CSS 3D盒子动画,利用jqueryUI和jquery实现盒子动画的控制,在线看请戳这里,下载把玩请戳这里。
2014-02-24 20:55:09 5983 1
原创 纯CSS实现3D翻牌效果
CSS3演武场继续CSS案例研究,今天来看一个纯CSS实现的3D翻牌效果,简易效果请大家狠戳这里在线体验,或下载收藏。
2014-02-23 14:53:51 14367 1
原创 纯CSS实现手风琴效果
今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。
2014-02-23 10:32:16 15433 14
原创 《月熊志》网站欣赏
好的,经过几天的悲哀与沉寂,每日一站这个网站欣赏栏目今天继续,博主发现这个栏目的文章既受人欢迎又容易导致误解,因此决定这个模块的文章不再推荐到首页,感兴趣的童鞋自行前来欣赏吧。好的言归正传,今天给大家推荐亚洲动物基金的一个终止动物虐待的网站,内容发人深省,设计打动人心,技术应用恰到好处。网站加载引导页,随着进度条的加载,网站的slogan也逐渐呈现,深灰色的配色令人倍感压抑(比较切
2014-02-22 15:18:48 4817 2
原创 html5烟花绽放效果
今天来看一个利用canvas+javascript实现的烟花绽放效果,大家可以到我的codepen看看DEMO,在线观看或是下载研究,悉听尊便。
2014-02-20 17:33:24 23751 56
翻译 SVG线画如何实现
本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER(同时也是Codepen的站长)的文章《How SVG Line Animation Works》,文章不逐字翻译,以意译为主。另外说一句,本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理,总是感觉说不清原理,同时学习下大牛的表达方式。
2014-02-19 14:38:46 6772 2
原创 纯CSS实现的Loading效果
纯CSS实现的Loading效果,CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。
2014-02-18 15:34:51 4321
原创 “纯萌”网站欣赏
每日一站今天继续,这个主题每次都喜忧参半,一方面大家都很喜欢,能够让更多的人看到,给更多的人或许一点点帮助也能让博主乐呵半天;另一方面,因为推荐的网站很多都是商业网站,难以摆脱广告的嫌疑,先后两次被“首页退回”,很是郁闷。哎,废话不多,我们言归正传。今天这个网站来自宝岛台湾,一个动漫网站,使用背景滚动实现的动画效果,动漫风格的图片很萌、很靓。引导页的loading效果很纯、很萌,单一的背景
2014-02-18 10:09:33 3643
原创 纯CSS实现3D折纸效果
今天继续来看一个纯CSS实现的3D折纸效果,效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的,没有看过的童鞋欢迎移步。本效果原理如下图所示,分别用.img,.img:before和.img:after三个元素装载图像的50%,30%和20%三个部分,三个部分设置一样的背景图像,下面两个background-position属性实现背景偏移。
2014-02-17 20:27:43 5713 1
原创 纯CSS实现图像3D悬停效果
今天来看一个纯CSS实现的图像3D效果,用div.img装载图像的上半段,.img:fefore伪类来实现图像的下半段、呈现图像标题,用.img:after伪类实现图像的阴影。
2014-02-16 18:31:21 6070 2
原创 “大气”网站欣赏
在网页设计领域,国风一般出现在房地产、游戏、传统文化等网站中,这些房地产项目或是中式别墅,或是田园风格,游戏则一般是历史风格的游戏,传统文化元素诸如书画、玉石、戏剧等本身就为传统文化元素,因此这些应用皆属国风风格“形似”应用。而体现中国传统文化内涵,传统元素的神似应用却不多见,今天给大家介绍一个商业网站中的应用。
2014-02-16 10:55:49 4858 8
原创 前端工程师必备-网址篇(持续完善中)
他山之石,可以攻玉,从别人的设计里汲取灵感,酷站集;交流创意,我秀我乐,开放分享获得成长,设计师交流社区……
2014-02-15 21:13:44 7143 14
原创 “年味”网站欣赏
话说,非诚勿扰经常会出来一些“奇葩”,首轮上来灯全灭,所以说第一印象很重要。对于网站来说你的第一印象产生于网站主页,主页的色调、版式能不能给人视觉冲击,能不能瞬间抓住浏览者的心,非常关键。
2014-02-14 20:38:47 3105 2
原创 “绝美画卷”网站欣赏
今天我们继续来看个国风的设计作品,大家可以到官网仔细体会(为避免广告之嫌,不再列出项目名称,大家见谅)。这是一个城市度假地产网站,所以整个网站以突出休闲、恬静为主题,同时展示其文化底蕴,从网站作品看,很好的达到了这个主题。尤其是导航设计方面,更是匠心独运。浏览网站,恰似绘制一幅度假胜地的绝美画卷,按下鼠标左键开始绘制画卷,底部标尺作为主导航也令人爽心悦目。好的,上图。网站引导页的定
2014-02-13 19:16:33 2821
原创 EaselJS简明教程1-绘图
EaselJS是CreateJS Suite中的一个js库,它可以让canvas的使用变得简单,它提供了一个直接了当的创建html5 canvas中使用富媒体、富交互应用的解决方案。为了便于大家学习,结合官方教程和官方DEMO我们来写一个简明教程,主要是对自己的学习做个梳理,也希望对大家有所帮助。
2014-02-13 12:17:28 10428 6
原创 纯CSS实现checkbox
纯css实现的checkbox,效果见我的codepen。关键在于把原生的input隐藏,用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现,用右边和下边的边框组合,然后旋转而成。
2014-02-10 21:28:30 5225
原创 最好的 HTML5/CSS3 演示(PPT)框架
随着互联网与信息技术的发展,人际之间的资源分享、观点碰撞越来越频繁。PPT是一个很好的展示和交流的方式,但是在网络实时呈现方面,桌面端的PPT程序显得无能为力。因此,基于web的内容展示应用需求激增,在此背景下,基于html5+css3的演示框架日渐流行。今天,我们就来给大家推荐几个流行的项目。
2014-02-08 19:49:30 10753
原创 通过开源文档学LESS系列3
通过开源文档学LESS系列1,我们通过一个经典的LESS Mixins集preboot,学习了LESS的基础知识,包括变量、注释、混合和混合的参数等。通过开源文档学LESS系列2,通过tRRtoolbelt.less的代码解读来学习LESS,主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。本教程通过解读css effects项目源码来继续学习LESS。
2014-02-07 20:29:03 3268
原创 通过开源文档学LESS系列2
通过开源文档学LESS系列的第一部分,我们通过一个经典的LESS Mixins集preboot,学习了LESS的基础知识,包括变量、注释、混合和混合的参数等,详见通过开源文档学LESS系列1。我们继续第二部分,通过tRRtoolbelt.less的代码解读来学习LESS。tRRtoolbelt.less是由Trent Oswald开发的一个便用日常应用的LESS mixinis Collection。
2014-02-07 17:20:56 3130
原创 通过开源文档学LESS系列1
今天开始一个系列教程,通过一些国外开源LESS文档来学习LESS。这些开源http://的文档一般都是前端开发实际项目经验的总结,从中可以看出LESS的基本语法和日常使用,也可以从中管窥大牛开发者的智慧。
2014-02-07 12:59:00 3027 1
原创 CSS3 莲花盛开动画
See the Pen CSS3 Lotus by haiqing wang (@whqet) on CodePen.大家先来看看效果,纯CSS3实现,为了简化问题,使用LESS和prefix free。
2014-02-06 23:01:48 4988 5
原创 CSS文字条纹阴影动画
See the Pen shadow text by haiqing wang (@whqet) on CodePen./*Webkit Only,key code for the effect*/ .background-clip(text); -webkit-text-fill-color: transparent;
2014-02-06 07:18:00 4481 2
原创 canvas多彩条纹背景
See the Pen Canvas stripes by haiqing wang (@whqet) on CodePen.
2014-02-05 20:27:31 4674 2
原创 LESS Hat简单教程
今天给大家推荐LESS的几个Mixin集,其中最著名的要数LESS Hat了,诚如其官方网站所言,“86个智能Mixin可以大大简化网页开发工作”。另外,LESS Elements、Twitter Bootstrap和Preboot几个也不错,都是可以选择的。笔者认为,LESS Hat提供的mixin最多,支持最广泛,建议大家使用。
2014-02-04 11:40:29 5136 1
纯CSS3实现图像鼠标悬停效果
2014-04-13
图像多维展示效果
2014-04-13
AS3焦点图 Flash ActionScript 3.0 焦点图 经典网络应用程序
2011-01-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人