关注
分享
文章平均质量分 88
本专栏重点关注CSS3，使用“详解教程”的方式详解CSS3各属性的用法，使用“案例解析”的方式体验CSS3的强大，CSS 3d、Pure css超多案例，相信可以对您学习CSS3有所帮助。
whqet
这个作者很懒，什么都没留下…
展开
-
文字菜单动画畅想
本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注，今天我们更进一步，研究一下文字菜单上可以做哪些动画，15种效果会不会有您喜欢的，来来来，不妨进来坐坐。原创 2015-01-30 06:34:57 · 7832 阅读 · 29 评论 -
纯css实现粒子效果
好久没有更新的CSS3演武场系列，半年前搁浅的一篇文章赋予新年新气象闪亮登场了，研究一下利用css（sass）实现粒子效果，主要使用box-shadow生成粒子，利用css3 animation和translateZ实现动画。原创 2015-01-09 12:49:57 · 16174 阅读 · 22 评论 -
纯CSS实现超酷发送按钮
今天在Dribble闲逛，偶然间看到一个不错的发送完成效果，使用纯css实现了下，最终效果如下。原创 2014-08-05 20:52:40 · 8904 阅读 · 10 评论 -
CSS3立体文字最佳实践
昨天的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，其中3d文字效果最为流行，限于篇幅仅仅展示了其3D实现原理，没有考虑代码的复用性和可移植性，立体字的纵深感、方向感、错落感如何实现个性定制，立体字阴影动画，彩虹字动画等等，一一道来。原创 2014-05-06 13:40:46 · 20473 阅读 · 12 评论 -
纯CSS3文字效果推荐
之前曾经研究过几个纯css实现的文字效果，《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等，今天我们来研究几款文字效果，主要利用text-shadow、webkit内核的几个独有特性实现效果。原创 2014-05-04 21:25:10 · 44578 阅读 · 62 评论 -
纯css3响应式3d翻转菜单
周末快乐哈，今天来看一个纯CSS3实现的3d翻转菜单，3d响应式菜单，希望对大家有所帮助。原创 2014-04-19 22:07:40 · 6268 阅读 · 6 评论 -
Auto值的CSS3 Transition解决方案
今天在准备明天的课堂案例时，遇到了Auto值的Transition Bug问题，这里的解决方案是我们需要尽可能的绕过auto值，这里我们可以通过使用max-height绕过height:auto值。原创 2014-04-10 20:19:01 · 8760 阅读 · 2 评论 -
CSS3图片阴影效果解析
利用CSS3实现图片阴影效果，在线研究点这里，下载收藏点这里。主要利用transform、z-index、box-shadow实现效果。原创 2014-04-09 22:45:49 · 6982 阅读 · 5 评论 -
纯CSS实现图像鼠标悬停效果
今天来看一组纯CSS实现的鼠标悬停效果，在线研究代码点效果一、效果二、效果三，下载收藏点这里。原创 2014-04-03 20:29:24 · 25056 阅读 · 18 评论 -
跨浏览器图像灰度(grayscale)解决方案
实现图像灰度（grayscale）最初有ie4推出的专属属性filter实现，后来在css3里w3c实现了标准的filter，不过不同浏览器的实现程度不一样，因此现阶段我们必须探索一种浏览器兼容的解决方案。原创 2014-04-03 10:39:13 · 27843 阅读 · 13 评论 -
SASS Mixin实现响应式布局
好的，今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理，每行的最后一列没有空隙，前面的其他列具有统一的空隙，水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算，每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。原创 2014-03-30 08:58:39 · 6401 阅读 · 1 评论 -
SASS实现圆形动画菜单
好的，SASS实现的圆形动画菜单，主要用到了sass中的@for、@if，compass中sin、cos的使用，hsl颜色的使用。原创 2014-03-21 20:47:06 · 4841 阅读 · 1 评论 -
SASS实现颜色卡动画
今天我们看一个Sass实现颜色卡动画，继续学习sass的使用，效果见下图所示。在线研究点这里，下载收藏点这里。同时也请大家发表高见，迎接鼓励，欢迎拍砖。原创 2014-03-20 13:32:14 · 4106 阅读 · 0 评论 -
响应式表格
来继续看一个响应式表格，重点学习媒体查询，智能手机中将表头隐藏，利用:before伪对象伪造表头，效果见如下图所示。原创 2014-03-18 20:10:47 · 5712 阅读 · 7 评论 -
响应式菜单
今天来看一个响应式布局菜单效果，重点应用媒体查询、css3绘图、jquery简单应用.原创 2014-03-18 14:19:15 · 4175 阅读 · 1 评论 -
纯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 · 4321 阅读 · 1 评论 -
响应式奶油立体字效果
好的，CSS3演武场今天继续，来看一个由text-shadow实现的响应式立体字效果。前端开发whqet，关注web前端开发技术，分享网页相关资源。原创 2014-03-11 08:25:42 · 4716 阅读 · 1 评论 -
Flexbox响应式菜单
这两天在研究flexbox，来看一个Flexbox实现的响应式菜单。原创 2014-03-09 20:36:26 · 4160 阅读 · 0 评论 -
纯CSS仿制Google女生节Doodle
看到google今天的女生节Doodle，自己用纯css做了一个，送给老妈、老婆、女儿。原创 2014-03-07 21:56:20 · 7550 阅读 · 5 评论 -
纯CSS实现3D图像轮转
CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。原创 2014-03-05 16:06:25 · 5343 阅读 · 5 评论 -
纯CSS实现倒计时动画
OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。实现原理a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束，外盒子动画消失掉。原创 2014-02-25 10:13:43 · 17379 阅读 · 1 评论 -
可控制的CSS3D盒子动画
今天来看一个CSS 3D盒子动画，利用jqueryUI和jquery实现盒子动画的控制，在线看请戳这里，下载把玩请戳这里。原创 2014-02-24 20:55:09 · 5979 阅读 · 1 评论 -
纯CSS实现3D翻牌效果
CSS3演武场继续CSS案例研究，今天来看一个纯CSS实现的3D翻牌效果，简易效果请大家狠戳这里在线体验，或下载收藏。原创 2014-02-23 14:53:51 · 14347 阅读 · 1 评论 -
纯CSS实现手风琴效果
今天来看一个使用hover触发的一个手风琴效果，鼠标hover时改变图像宽度，配合transition实现动画，效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。原创 2014-02-23 10:32:16 · 15390 阅读 · 14 评论 -
SVG线画如何实现
本文翻译自CSS-TRICKS的站长CSS大牛CHRIS COYIER（同时也是Codepen的站长）的文章《How SVG Line Animation Works》，文章不逐字翻译，以意译为主。另外说一句，本博客发表的文章《SVG奥林匹克五环动画》用的也是这个原理，总是感觉说不清原理，同时学习下大牛的表达方式。翻译 2014-02-19 14:38:46 · 6742 阅读 · 2 评论 -
纯CSS实现的Loading效果
纯CSS实现的Loading效果，CSS3试验场重点实验CSS3的动画属性。大家可以到我的codepen看看效果。原创 2014-02-18 15:34:51 · 4316 阅读 · 0 评论 -
纯CSS实现3D折纸效果
今天继续来看一个纯CSS实现的3D折纸效果，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎移步。本效果原理如下图所示，分别用.img，.img:before和.img:after三个元素装载图像的50%，30%和20%三个部分，三个部分设置一样的背景图像，下面两个background-position属性实现背景偏移。原创 2014-02-17 20:27:43 · 5678 阅读 · 1 评论 -
纯CSS实现图像3D悬停效果
今天来看一个纯CSS实现的图像3D效果，用div.img装载图像的上半段，.img:fefore伪类来实现图像的下半段、呈现图像标题，用.img:after伪类实现图像的阴影。原创 2014-02-16 18:31:21 · 6032 阅读 · 2 评论 -
纯CSS实现checkbox
纯css实现的checkbox，效果见我的codepen。关键在于把原生的input隐藏，用和他相关的label来探测单击事件。再就是checkbox里的对勾的实现，用右边和下边的边框组合，然后旋转而成。原创 2014-02-10 21:28:30 · 5216 阅读 · 0 评论 -
SVG奥林匹克五环动画
昨天晚上索契冬奥会开幕，开幕式上还出现了五环变四环的乌龙，哈哈。我们用SVG弄个五环动画加以弥补。原创 2014-02-08 12:09:50 · 5933 阅读 · 5 评论 -
CSS3 莲花盛开动画
See the Pen CSS3 Lotus by haiqing wang (@whqet) on CodePen.大家先来看看效果，纯CSS3实现，为了简化问题，使用LESS和prefix free。原创 2014-02-06 23:01:48 · 4977 阅读 · 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 · 4451 阅读 · 2 评论 -
响应式布局的相册效果
<!--p {text-indent:2em; line-height:24px; font-size:14px}h1, img {margin:0.6em 0}h1 {font-size:16px; line-height:22px}-->响应式布局的相册效果，效果如下图所示，或者看看demo，记得调整浏览器宽度哟，或者直接下载。开始制原创 2013-05-17 14:42:18 · 3523 阅读 · 0 评论 -
纯CSS3打造精美按钮
利用CSS3实现精美按钮，效果如下图所示，也可以狠狠点击这里。前端开发whqet，关注前端开发技术 分享网页相关资源。实现两种风格的按钮，主要利用box-shadow阴影实现3d风格的按钮，同时利用css的counter实现计数。html结构非常简单，详细代码如下。 Number One Number Two Number Three Number Four Nu原创 2013-05-13 22:32:42 · 3422 阅读 · 0 评论 -
Font Icon 的资源推荐
关于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原创 2013-05-12 20:46:03 · 2320 阅读 · 0 评论 -
详解CSS3渐变
渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、re原创 2013-05-11 17:44:34 · 3163 阅读 · 3 评论 -
纯CSS3时钟
一、效果欣赏纯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原创 2013-05-07 13:44:33 · 2543 阅读 · 3 评论 -
纯CSS3进度条制作-Pure CSS3 Progress Bar
1.效果分析纯CSS3实现进度条的制作，效果如下图所示，详见----demo----2.难点分析圆角边框，内阴影，渐变填充实现斜纹效果斜纹动画3.实现步骤a.html架构 b.进度条母条.progressBar的实现.progressBar{ margin: 50px auto; padding: 5px;原创 2013-05-06 22:01:27 · 5413 阅读 · 0 评论 -
响应式网页设计学习笔记
一、why随着移动技术的迅速普及，越来越多的人通过不同设备来浏览网页，为了便于不同设备的用户访问，网页经常需要针对不同设备进行不同的设计，不但费时费力，而且不同界面容易造成用户体验的不一致。响应式web设计正是由此而生。图1-4可以充分说明响应式网页设计的必要性。图1.当前流行的网页浏览设备图2.网页运行于不同的操作系统图3.当前主流的屏幕尺寸对比原创 2013-05-06 12:27:19 · 3946 阅读 · 3 评论 -
CSS3实现动画相册
1.效果解析CSS3实现的动画相册，很棒的鼠标hover效果，效果如下图所示，参见--------demo---------2.难点分析难点1，圆形遮罩难点2，:after实现提示文本难点3，css3实现动画3.实现步骤a.html架构 使用无序列表来布局图像，图像的提示文本使用:after读取a的title属性。原创 2013-05-05 22:23:59 · 3072 阅读 · 0 评论