2015年01月22日 by 张 鑫旭 阅读 81486 次
现在web技术不断发展,视图与数据渲染更多由前端呈现,后台更多与数据打交道。于是,我们会经常看到这样的交互场景。页面加载,看到一个框框里面有个菊花在转,然后内容呈现;或者点击个按钮,菊花在转,然后列表动态加载呈现。
确实,功能上OK,有菊花,用户也愿意等。但是,大家有没有觉得所有交互,出现菊花→出现内容,都是“砰砰砰”很生硬的感觉,尤其当内容是动态,高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉,整个交互流程都是很流畅的,就像山涧的泉水,涓涓细流到山脚,而不是巨人在峡谷走路的感觉。
所以,如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现,势必会增强用户体验。
而本文就将分享,我是如何渐进处理,让动画过渡呈现更自然的…… 必须的,demo,截图,源代码展示一个不少,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: getComputedStyle, height, transition, 加载, 动画, 渐进增强
发布在 JS实例 | 35 条评论 »
2015年01月10日 by 张 鑫旭 阅读 57084 次
一般我们对Chrome浏览器的评价是:Chrome好棒!Chrome好潮!Chrome就是多来A梦,要什么有什么!但是,再好的奶茶也会有过期的时候。很多次遇到,Chrome下的渲染表现是最糟糕的那个。比方说本文要介绍的两个bug就是Chrome浏览器下特有的,到底是什么bug呢?点击去瞅瞅就知道啦!
当然,除了bug展示,也提供了解决方案。有demo,有截图,有必要的源代码展示,总之希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: absolute, bug, chrome, display:inline-block, translateZ, visibility, webkit, 渲染, 重绘
发布在 CSS相关 | 22 条评论 »
2014年12月28日 by 张 鑫旭 阅读 91405 次, 今日 1 次
以前介绍过一种方法实现打点loading动画效果,但是那个方法不健壮,机缘巧合,让我重新思考有没有更好的方法。而本文分享的就是自己想到了2个全新的实现方法,兼容各大小浏览器。
本文不仅有demo,源代码展示,还特意制作了多种gif效果演示帮助理解,相信本文的内容会对你的工作有所帮助的!
阅读全文…
标签: animation, background-clip, box-shadow, currentColor, gif, step-start, 动画, 打点, 点点点
发布在 CSS相关 | 18 条评论 »
2014年12月22日 by 张 鑫旭 阅读 54054 次
CSS3的领域范围已经渗透到了cursor
属性(鼠标手形)。这里简单介绍两个相当实用的组合zoom-in
/zoom-out
以及grab
/grabbing
.
本文重在展示,开阔眼界,一如既往,有demo,有截图,有必要的源代码展示,总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: css3, cursor, grab, grabbing, zoom-in, zoom-out
发布在 CSS相关 | 4 条评论 »
2014年12月22日 by 张 鑫旭 阅读 101371 次
CSS3新增属性除了我们现在用的比较多的border-radius
, box-shadow
, gradient
, ...
之类,还有很重要的一个分支:SVG属性家族!
所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置。本文的clip-path
就是其中一个属性,可以游走于SVG属性和CSS属性之前。本文中等篇幅,中等难度,丰富的源代码展示,丰富的demo页面,丰富的截图,还有必要的gif演示,总之,希望本文的内容能够对您的学习有所帮助!
阅读全文…
标签: clip-path, clipPath, css3, SVG, 图片剪裁, 遮罩
发布在 CSS相关, SVG相关 | 6 条评论 »
2014年12月14日 by 张 鑫旭 阅读 40280 次, 今日 2 次
如何实现矢量图形之间的过渡动画效果呢?可不可以像以前的flash那样,知道前后图形,直接创建中间的补间动画呢?有,当当当当,就是本文要介绍的SVG-Morpheus! 一如既往,有demo页面、有丰富的截图,有必要的源代码展示,不仅如此,本文还有swf效果展示, MP4视频效果展示以及gif截图效果。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: SVG Sprite, SVG-Morpheus, 图标, 矢量, 补间动画
发布在 SVG相关 | 9 条评论 »
2014年12月7日 by 张 鑫旭 阅读 76749 次
内容如题,重在展示,以及开拓眼界,拓宽思路。与通常该调调的文章类似,有demo,有源代码展示,还有必要的截图。总之,希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: :checked, counters, CSS计数器, label, 伪类, 复选框, 选择器
发布在 CSS相关 | 8 条评论 »
2014年12月7日 by 张 鑫旭 阅读 33380 次
我们平时都关注网页性能,或许还忽略了一个很重要的东西,元素的排序。很多时候,如何让页面元素以合适的排序呈现要比页面加载速度更重要。本译文的主要思想就是这个,欢迎围观。
阅读全文…
标签: 体验, 加载速度, 延迟加载, 性能, 滚动加载
发布在 外文翻译 | 14 条评论 »
2014年12月2日 by 张 鑫旭 阅读 61444 次
结语摘要:SVG是以后图形领域重要的媒介,如何导出适合开发的SVG图形是设计师必备技能,本文的填色等处理都是比较重要的处理细节;页面仔对图形软件使用不一定很熟,尤其illustrator,本文就拿一个比较复杂的图标举例,演示了如何迁移以及优化SVG路径。实际开发时候,一般的PSD中的小图标路径都是简单正常的,不需要“相减”或“联集”等路径操作。所以,弄清楚了本文的操作,基本上图标SVG变身都不是什么问题。
技术发展,以后肯定会出现PSD一键SVG转换工具的,本文内容就要作古了,或许现在就有,哪位小伙伴有所耳闻的,不妨分享下~~
阅读全文…
标签: font-face, illustrator, photoshop, SVG, 图标, 路径
发布在 Design相关, SVG相关 | 13 条评论 »
2014年11月30日 by 张 鑫旭 阅读 43392 次
如题,文字变菊花。没错,就是文字变菊花,具体什么内容,若有兴趣,自行点击去围观。很短的文章,分分钟就可以看完。
阅读全文…
标签: 按钮, 文字, 背景定位, 透明
发布在 CSS相关 | 13 条评论 »