whqet-CSDN博客

原创 iHover鼠标悬停效果包推荐

今天推荐一个鼠标悬停效果包，大家可以通过研读效果提高自己的水平，也可以直接用在自己的项目中。

2014-04-16 20:52:01 8594 11

原创图像多维展示效果

在Awwwards上欣赏牛人大作时，看到了一个网站newtonrunning，狠喜欢他的菜单切换效果和球鞋多维展示效果，然后禁不住手痒仿制了一个多维图像展示效果，大家可以欣赏效果，在线研究，下载收藏。本案例主要知识点，1.css counter计数器的使用，2.自适应设计（百分比实现），3.CSS3 Transition（过渡），4.复杂选择器的用法

2014-04-12 18:38:28 4863 3

翻译文字大小妙主意-Font Size Idea

原文：《Font Size Idea: px at the Root, rem for Components, em for Text Elements》作者：Chris Coyier，CSS-Tricks站长，Codepen站长翻译：前端开发whqet，以意译为主，不当之处请大家批评指正。

2014-04-11 22:39:00 4339 1

原创 Auto值的CSS3 Transition解决方案

今天在准备明天的课堂案例时，遇到了Auto值的Transition Bug问题，这里的解决方案是我们需要尽可能的绕过auto值，这里我们可以通过使用max-height绕过height:auto值。

2014-04-10 20:19:01 8810 2

原创 CSS3图片阴影效果解析

利用CSS3实现图片阴影效果，在线研究点这里，下载收藏点这里。主要利用transform、z-index、box-shadow实现效果。

2014-04-09 22:45:49 6999 5

原创 XP退役，IE6再见

XP今天退役，对于web前端人员来说，是个福音。

2014-04-08 10:11:53 2420 2

原创纯CSS实现图像鼠标悬停效果

今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里。

2014-04-03 20:29:24 25078 18

原创跨浏览器图像灰度(grayscale)解决方案

实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。

2014-04-03 10:39:13 27890 13

原创 html5视频控制效果

好吧，来看一个html5的video元素的应用，实现简单控制。到这里观看效果，到这里在线研究，或者下载收藏, 视频加载可能有点慢，请耐心等等。

2014-03-31 22:24:00 5161 1

原创 CSS居中对齐

文本居中，div居中，水平居中，垂直居中，两个方面11种解决方案总有一种适合您。

2014-03-30 14:53:25 6963 15

原创 SASS Mixin实现响应式布局

好的，今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理，每行的最后一列没有空隙，前面的其他列具有统一的空隙，水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。

2014-03-30 08:58:39 6435 1

原创 SASS实现圆形动画菜单

好的，SASS实现的圆形动画菜单，主要用到了sass中的@for、@if，compass中sin、cos的使用，hsl颜色的使用。

2014-03-21 20:47:06 4857 1

原创 SASS实现颜色卡动画

今天我们看一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。

2014-03-20 13:32:14 4120

原创响应式表格

来继续看一个响应式表格，重点学习媒体查询，智能手机中将表头隐藏，利用:before伪对象伪造表头，效果见如下图所示。

2014-03-18 20:10:47 5720 7

原创响应式菜单

今天来看一个响应式布局菜单效果，重点应用媒体查询、css3绘图、jquery简单应用.

2014-03-18 14:19:15 4190 1

原创苹果风格的下划线

今天研究一个利用text-shadow和:after伪对象做成的苹果风格的下划线效果。

2014-03-17 21:07:03 5067 1

原创 Google Fonts Sass Mixin

给大家分享一个codepen上的调用谷歌Web Font的mixin，以此为例我们继续学习SASS。

2014-03-15 20:38:40 3407

原创纯css实现回旋动画

css演武场今日继续，来看一个纯css实现的回旋动画。在线研究点这里，下载收藏点这里。重点关注1. haml简化html，实现效果架构2.sass的使用3.compass类库的使用haml文件- @n = 25.container - @n.times do .thing编译成html之后

2014-03-12 13:52:53 4334 1

原创响应式奶油立体字效果

好的，CSS3演武场今天继续，来看一个由text-shadow实现的响应式立体字效果。前端开发whqet，关注web前端开发技术，分享网页相关资源。

2014-03-11 08:25:42 4747 1

原创 Flexbox响应式菜单

这两天在研究flexbox，来看一个Flexbox实现的响应式菜单。

2014-03-09 20:36:26 4171

原创纯CSS仿制Google女生节Doodle

看到google今天的女生节Doodle，自己用纯css做了一个，送给老妈、老婆、女儿。

2014-03-07 21:56:20 7558 5

原创纯CSS实现3D图像轮转

CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。

2014-03-05 16:06:25 5354 5

原创视差滚动原理及实现

作为一种优雅酷炫的页面展示的方式，视差滚动（Parallax Scrolling）正受到越来越多前端设计师的宠爱，优设的2014年网页设计趋势中依然能够看到它的影子，所以我们不得不来好好研究下视差滚动的原理和实现方式。

2014-03-04 14:48:03 7621 1

原创博客写作计划

近段时间的博客写作计划，予以自勉。css3属性详解系列html5逐步学系列响应式布局教程sass文档翻译和实例解读系列css3案例解析系列javascript起步教程系列每日一站系列视觉设计系列

2014-03-02 14:33:02 2364 1

翻译 2014年启用响应式网页的5个理由

响应式网页是你今年的最优选择吗？如果不是，那你得看看《2014年设计趋势》这篇文章，然后启用这个流行技术。我列出了你应该尽快使用响应式网页的5个理由。

2014-03-01 21:52:35 2902 1

原创 SASS基础教程

在SASS官方文档的基础上，加上了自己的解读和相关优秀资源推荐，欢迎大家拍砖！点保存点成了发表，请大家见谅！继续写作中。

2014-02-27 19:55:22 3243 1

原创为什么写博客？

希望通过博客这个平台记录自己的学习进程，反思学习心得，提高自己，同时可以帮助到别人，善莫大焉！希望自己可以坚持，坚持走自己的路，坚持到底！

2014-02-26 13:27:35 2065

转载界面设计之尺寸篇

转载自站酷，原文链接http://www.zcool.com.cn/article/ZNjUzODg=.html#

2014-02-25 21:15:23 2403

原创 CreateJS奥运五环动画

索契奥运会结束了，今天给大家看一个利用CreateJS实现的奥运五环动画，在线把玩请点这里，下载收藏请戳这里。

2014-02-25 20:39:49 4952 12

OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束，外盒子动画消失掉。

2014-02-25 10:13:43 17409 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 14368 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

纯CSS3实现图像鼠标悬停效果

主要利用css3transition、transform实现鼠标悬停效果，很不错的效果，定然不让你失望，可以到http://blog.csdn.net/whqet/article/details/22891391了解详情。

2014-04-13

图像多维展示效果

在Awwwards上欣赏牛人大作时，看到了一个网站newtonrunning，狠喜欢他的菜单切换效果和球鞋多维展示效果，然后禁不住手痒仿制了一个多维图像展示效果，大家可以到我的博客http://blog.csdn.net/whqet查看详情。

2014-04-13

纯css实现的3d翻转效果

纯css实现的3d翻转效果，可以用来学习理解css的3d动画实现，思路借鉴。

2013-04-30

AS3焦点图 Flash ActionScript 3.0 焦点图经典网络应用程序

AS3写的焦点图。AS3焦点图 Flash ActionScript 3.0 焦点图经典网络应用程序。XMl文件读取。/* 用到了知识点： Timer XML URLLoader pic Loader 按钮按钮单击事件 */ /** 思路：不进行缩放 1.初始化，控制面板背景，表示标题的动态文本，控制的按钮，生成提示当前图片的按钮。 2.读取XML，把里面的图片信息（图片地址和图片标题）获取进来，生成按钮 3.自动播放，Timer 4.鼠标控制 */ //控制控制面板的位置，0代表上方，1代表下方

2011-01-18

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人