whqet

本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注，今天我们更进一步，研究一下文字菜单上可以做哪些动画，15种效果会不会有您喜欢的，来来来，不妨进来坐坐。

好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。

今天在Dribble闲逛，偶然间看到一个不错的发送完成效果，使用纯css实现了下，最终效果如下。

昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，其中3d文字效果最为流行，限于篇幅仅仅展示了其3D实现原理，没有考虑代码的复用性和可移植性，立体字的纵深感、方向感、错落感如何实现个性定制，立体字阴影动画，彩虹字动画等等，一一道来。

之前曾经研究过几个纯css实现的文字效果，《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等，今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。

周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

今天来看一个CSS 3D盒子动画，利用jqueryUI和jquery实现盒子动画的控制，在线看请戳这里，下载把玩请戳这里。

CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果，简易效果请大家狠戳这里在线体验，或下载收藏。

今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。

本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER（同时也是Codepen的站长）的文章《How SVG Line Animation Works》，文章不逐字翻译，以意译为主。另外说一句，本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理，总是感觉说不清原理，同时学习下大牛的表达方式。

纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。

今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。

今天来看一个纯CSS实现的图像3D效果，用div.img装载图像的上半段，.img:fefore伪类来实现图像的下半段、呈现图像标题，用.img:after伪类实现图像的阴影。

纯css实现的checkbox，效果见我的codepen。关键在于把原生的input隐藏，用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现，用右边和下边的边框组合，然后旋转而成。

昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。

See the Pen CSS3 Lotus by haiqing wang (@whqet) on CodePen.大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。

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;

<!--p {text-indent:2em; line-height:24px; font-size:14px}h1, img {margin:0.6em 0}h1 {font-size:16px; line-height:22px}-->响应式布局的相册效果，效果如下图所示，或者看看demo，记得调整浏览器宽度哟，或者直接下载。开始制

利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术 分享网页相关资源。实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。html结构非常简单，详细代码如下。 Number One Number Two Number Three Number Four Nu

关于Font Icon的教程How to Use Icon Font?@font-face@font-face制作Web Icon Icon font 实践如何把你的图标转换成web字体Font Icon的资源30 Free Icon Font SetsAbsolutely Free Icon Fonts20 @fontface Icon S

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、re

一、效果欣赏纯css3打造精美时钟效果，效果如下图所示，也可看看----demo-----二、难点解析单独位数数字动画动画状态的控制三、实现步骤1.html架构 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 : 0 1 2 3 4 5 6

1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----2.难点分析圆角边框，内阴影，渐变填充实现斜纹效果斜纹动画3.实现步骤a.html架构 b.进度条母条.progressBar的实现.progressBar{ margin: 50px auto; padding: 5px;

一、why随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。图1.当前流行的网页浏览设备图2.网页运行于不同的操作系统图3.当前主流的屏幕尺寸对比

1.效果解析CSS3实现的动画相册，很棒的鼠标hover效果，效果如下图所示，参见--------demo---------2.难点分析难点1，圆形遮罩难点2，:after实现提示文本难点3，css3实现动画3.实现步骤a.html架构 使用无序列表来布局图像，图像的提示文本使用:after读取a的title属性。