![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
案例研究
文章平均质量分 90
whqet
这个作者很懒,什么都没留下…
展开
-
炫彩logo粒子效果
昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了这个炫彩logo粒子效果,效果预览如下。原创 2015-01-21 14:23:21 · 8414 阅读 · 28 评论 -
鼠标响应文字跳动效果
昨天看到html5tricks上的一篇文章《jQuery鼠标滑过文字跳动动画插件》,止不住手痒用sass、css3实现下,并进行了扩展,希望能对大家有所帮助,主要利用sass@for指令、compass里的random随机数,给文字设置不同的动画状态,利用transition或animation实现动画。原创 2014-05-30 23:02:23 · 9356 阅读 · 7 评论 -
语音控制的tab选项卡
ladies and 乡亲们,坚守工作岗位的程序猿们,时间不止学习不辍的童鞋们,福音来了。语音识别高不高端、难不难?今天给大家推荐一个简单易用的js实现的语音识别框架annyang,然后用一个案例教教大家使用。原创 2014-05-25 10:42:00 · 8635 阅读 · 20 评论 -
SASS Mixin实现响应式布局
好的,今天我们来研读下css大牛Chris Coyier的利用SASS实现响应式布局的解决方案(Simple Technique for using Sass for Rows)。列间空隙的处理,每行的最后一列没有空隙,前面的其他列具有统一的空隙,水平和垂直方向的空隙相等。每列宽度采用百分比的形式进行计算,每列宽度=(总宽度-空隙总宽度)/列数=(总宽度-(列数-1)*空隙宽度)/列数。原创 2014-03-30 08:58:39 · 6424 阅读 · 1 评论 -
跨浏览器图像灰度(grayscale)解决方案
实现图像灰度(grayscale)最初有ie4推出的专属属性filter实现,后来在css3里w3c实现了标准的filter,不过不同浏览器的实现程度不一样,因此现阶段我们必须探索一种浏览器兼容的解决方案。原创 2014-04-03 10:39:13 · 27873 阅读 · 13 评论 -
CSS3图片阴影效果解析
利用CSS3实现图片阴影效果,在线研究点这里,下载收藏点这里。主要利用transform、z-index、box-shadow实现效果。原创 2014-04-09 22:45:49 · 6992 阅读 · 5 评论 -
html5视频控制效果
好吧,来看一个html5的video元素的应用,实现简单控制。到这里观看效果,到这里在线研究,或者下载收藏, 视频加载可能有点慢,请耐心等等。原创 2014-03-31 22:24:00 · 5160 阅读 · 1 评论 -
纯CSS实现图像鼠标悬停效果
今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里。原创 2014-04-03 20:29:24 · 25069 阅读 · 18 评论 -
玩转CSS Counter
CSS Counter(CSS 计数)可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能,灵活使用CSS Counter可以让我们在进行文档排版、页面布局时事半功倍,好的,请大家摩摩拳擦擦掌,精彩内容马上呈现。原创 2014-04-17 12:03:02 · 5948 阅读 · 8 评论 -
图像多维展示效果
在Awwwards上欣赏牛人大作时,看到了一个网站newtonrunning,狠喜欢他的菜单切换效果和球鞋多维展示效果,然后禁不住手痒仿制了一个多维图像展示效果,大家可以欣赏效果,在线研究,下载收藏。本案例主要知识点,1.css counter计数器的使用,2.自适应设计(百分比实现),3.CSS3 Transition(过渡),4.复杂选择器的用法原创 2014-04-12 18:38:28 · 4860 阅读 · 3 评论 -
iHover鼠标悬停效果包推荐
今天推荐一个鼠标悬停效果包,大家可以通过研读效果提高自己的水平,也可以直接用在自己的项目中。原创 2014-04-16 20:52:01 · 8585 阅读 · 11 评论 -
纯css3响应式3d翻转菜单
周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单,3d响应式菜单,希望对大家有所帮助。原创 2014-04-19 22:07:40 · 6274 阅读 · 6 评论 -
响应式表格
来继续看一个响应式表格,重点学习媒体查询,智能手机中将表头隐藏,利用:before伪对象伪造表头,效果见如下图所示。原创 2014-03-18 20:10:47 · 5717 阅读 · 7 评论 -
纯CSS实现超酷发送按钮
今天在Dribble闲逛,偶然间看到一个不错的发送完成效果,使用纯css实现了下,最终效果如下。原创 2014-08-05 20:52:40 · 8908 阅读 · 10 评论 -
html5烟花绽放效果
今天来看一个利用canvas+javascript实现的烟花绽放效果,大家可以到我的codepen看看DEMO,在线观看或是下载研究,悉听尊便。原创 2014-02-20 17:33:24 · 23737 阅读 · 56 评论 -
ECharts案例教程2
ECharts案例教程系列文章,试图通过案例从入门到精通的方式学习数据可视化工具ECharts,第1篇我们通过简单的条形图、条形图和折线图的混搭两个案例描述ECharts的使用流程,数据配置框架等。本博文为第2篇,研究时间轴在数据图中的应用。原创 2015-01-16 07:15:26 · 12564 阅读 · 40 评论 -
requestAnimationFrame动画控制详解
还在使用setInterval吗,你out了,requestAnimationFrame可以实现更为经济、更加准确的控制动画,今天来看看它的来龙去脉。原创 2015-01-20 07:28:23 · 30284 阅读 · 19 评论 -
svg动画实现弹性侧栏菜单
众所周知,flash动画类型可以分为补间动画和逐帧动画,补间动画又可以分为属性改变(大小、位置、颜色等)和形状改变(直线变弧线等)。网页动画里,我们可以使用css3、javascript(jquery)等实现属性改变,却对形状改变无能为力,那么如何实现网页动画里的形状改变呢?今天提供一种解决方案——通过snap.svg动态改变svg形状实现,案例效果如下图所示,案例灵感来自codrops。原创 2014-12-31 00:03:23 · 4854 阅读 · 13 评论 -
ECharts案例教程1
早上起来闲逛codops,在它的Web Design & Development News: Collective #149 | Codrops发现了来自百度的数据可视化工具Echarts,貌似功能强大,自己尝试着学习下,顺便给大家梳理Echarts案例教程系列文章,欢迎大家点赞拍砖!原创 2015-01-14 12:23:05 · 16468 阅读 · 19 评论 -
跟名站学前端之Brian Hoff Design
如果您是资深前端er,经验丰富、富有创意,也有可能面对新项目一时踌躇;如果您是前端初学者,可能胸中沟壑,无从下手。因此,多多赏析优秀网站,开阔视野、寻求灵感、解析技术显得很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中,选择一些有代表性的作品进行解析,欣赏、研读、提高,开始一个全新的系列博客《我跟名站学前端》,希望对大家有所帮助。今天开篇立意,来看第一博,我跟名站学前端之Brian Hoff Design。原创 2015-01-05 00:29:50 · 6015 阅读 · 23 评论 -
文字菜单动画畅想
本博之前曾经写过两篇博文《纯css3文字效果推荐》、《css3立体文字最佳实践》得到了大家的广泛关注,今天我们更进一步,研究一下文字菜单上可以做哪些动画,15种效果会不会有您喜欢的,来来来,不妨进来坐坐。原创 2015-01-30 06:34:57 · 7840 阅读 · 29 评论 -
跟名站学前端之某百科网站
系列博客《跟名站学前端》,希望对大家有所帮助,今天来看某百科网站的年度总结,交互体验超赞!原创 2015-01-12 13:11:01 · 5144 阅读 · 14 评论 -
跟名站学前端之mcdonalds
如果您是资深前端er,经验丰富、富有创意,也有可能面对新项目一时踌躇;如果您是前端初学者,可能胸中沟壑,无从下手。多多赏析优秀网站,开阔视野、寻求灵感、解析技术,很有必要。我们从国内外网页欣赏站(Awwwards\CSS Winner\Best CSS等)的收录作品中,选择一些有代表性的作品进行解析,欣赏、研读、提高,开始一个全新的系列博客《我跟名站学前端》,希望对大家有所帮助。今天来看台湾某餐饮品牌网站首页动画效果,希望对大家有所帮助。原创 2015-01-09 20:59:33 · 3754 阅读 · 12 评论 -
跟名站学前端之Trippeo
今天早上闲逛的时候发现了《Trippeo》-一个管理商业旅行软件产品的官方网站,网站简洁而又大方,值得我们学习,我们重点研读它的文字遮罩链接效果。原创 2015-01-29 08:36:59 · 3415 阅读 · 10 评论 -
纯css实现粒子效果
好久没有更新的CSS3演武场系列,半年前搁浅的一篇文章赋予新年新气象闪亮登场了,研究一下利用css(sass)实现粒子效果,主要使用box-shadow生成粒子,利用css3 animation和translateZ实现动画。原创 2015-01-09 12:49:57 · 16192 阅读 · 22 评论 -
Auto值的CSS3 Transition解决方案
今天在准备明天的课堂案例时,遇到了Auto值的Transition Bug问题,这里的解决方案是我们需要尽可能的绕过auto值,这里我们可以通过使用max-height绕过height:auto值。原创 2014-04-10 20:19:01 · 8787 阅读 · 2 评论 -
纯CSS3文字效果推荐
之前曾经研究过几个纯css实现的文字效果,《CSS文字条纹阴影动画》和《响应式奶油立体字效果》等,今天我们来研究几款文字效果,主要利用text-shadow、webkit内核的几个独有特性实现效果。原创 2014-05-04 21:25:10 · 44651 阅读 · 62 评论 -
纯CSS实现图像3D悬停效果
今天来看一个纯CSS实现的图像3D效果,用div.img装载图像的上半段,.img:fefore伪类来实现图像的下半段、呈现图像标题,用.img:after伪类实现图像的阴影。原创 2014-02-16 18:31:21 · 6058 阅读 · 2 评论 -
可控制的CSS3D盒子动画
今天来看一个CSS 3D盒子动画,利用jqueryUI和jquery实现盒子动画的控制,在线看请戳这里,下载把玩请戳这里。原创 2014-02-24 20:55:09 · 5981 阅读 · 1 评论 -
CreateJS奥运五环动画
索契奥运会结束了,今天给大家看一个利用CreateJS实现的奥运五环动画,在线把玩请点这里,下载收藏请戳这里。原创 2014-02-25 20:39:49 · 4943 阅读 · 12 评论 -
纯CSS实现倒计时动画
OK,CSS3演武场今天继续,我们重点来看看css3 animation实现逐帧动画,额,按照惯例,看效果点这里,下载戳这里。实现原理a.外盒子div.cell,一个字的宽和高,超过不显示,确保只能显示一个字。b.内盒子div.num,一个字的宽,行高一个字高,我们通过这个盒子的移动实现动画。c.内盒子的移动动画的animation-timing-function使用step。d.倒计时结束,外盒子动画消失掉。原创 2014-02-25 10:13:43 · 17401 阅读 · 1 评论 -
纯CSS实现手风琴效果
今天来看一个使用hover触发的一个手风琴效果,鼠标hover时改变图像宽度,配合transition实现动画,效果如下图所示。大家也可以到我的codepen在线编辑、下载收藏。原创 2014-02-23 10:32:16 · 15416 阅读 · 14 评论 -
SVG新年火柴棍动画
正在学习SVG,弄个2014年的火柴棍动画,大家先看效果。原创 2014-02-09 20:42:13 · 3656 阅读 · 1 评论 -
SVG奥林匹克五环动画
昨天晚上索契冬奥会开幕,开幕式上还出现了五环变四环的乌龙,哈哈。我们用SVG弄个五环动画加以弥补。原创 2014-02-08 12:09:50 · 5955 阅读 · 5 评论 -
通过开源文档学LESS系列3
通过开源文档学LESS系列1,我们通过一个经典的LESS Mixins集preboot,学习了LESS的基础知识,包括变量、注释、混合和混合的参数等。通过开源文档学LESS系列2,通过tRRtoolbelt.less的代码解读来学习LESS,主要讲解了LESS中的命名空间、作用域、多条件判断和类型判断函数、字符串插值和避免编译。本教程通过解读css effects项目源码来继续学习LESS。原创 2014-02-07 20:29:03 · 3260 阅读 · 0 评论 -
通过开源文档学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 · 3114 阅读 · 0 评论 -
canvas多彩条纹背景
See the Pen Canvas stripes by haiqing wang (@whqet) on CodePen.原创 2014-02-05 20:27:31 · 4667 阅读 · 2 评论 -
CSS3 莲花盛开动画
See the Pen CSS3 Lotus by haiqing wang (@whqet) on CodePen.大家先来看看效果,纯CSS3实现,为了简化问题,使用LESS和prefix free。原创 2014-02-06 23:01:48 · 4981 阅读 · 5 评论 -
“纯萌”网站欣赏
每日一站今天继续,这个主题每次都喜忧参半,一方面大家都很喜欢,能够让更多的人看到,给更多的人或许一点点帮助也能让博主乐呵半天;另一方面,因为推荐的网站很多都是商业网站,难以摆脱广告的嫌疑,先后两次被“首页退回”,很是郁闷。哎,废话不多,我们言归正传。今天这个网站来自宝岛台湾,一个动漫网站,使用背景滚动实现的动画效果,动漫风格的图片很萌、很靓。引导页的loading效果很纯、很萌,单一的背景原创 2014-02-18 10:09:33 · 3639 阅读 · 0 评论 -
响应式奶油立体字效果
好的,CSS3演武场今天继续,来看一个由text-shadow实现的响应式立体字效果。前端开发whqet,关注web前端开发技术,分享网页相关资源。原创 2014-03-11 08:25:42 · 4740 阅读 · 1 评论