CSS font-family常见中文字体对应的英文名称

2017年03月25日 by 张 鑫旭 阅读 107561 次

虽然一些常见中文字体直接使用中文名称作为CSS font-family的属性值也能生效,但我们一般都不使用中文名称,而是使用英文名称,主要是规避乱码的风险。还有一些中文字体,直接使用中文名称作为CSS font-family的属性值是没有效果的,需要使用对应的英文字体名称才可以。也即是说,不管怎样,你要想使用中文字体,就必须要知道其对应的英文名称…

阅读全文…

canvas 2D炫酷动效的实现套路和需要的技术积累

2017年03月18日 by 张 鑫旭 阅读 51078 次, 今日 2 次

目前在web领域,基本上看到那些酷酷的2d动效,都是canvas实现的,flash已经基本上都被淘汰了,canvas效果的实现,无需安装任何插件,IE9及其以上浏览器支持,至少在移动端,大家可以放心大胆使用,甚至webGL 3D效果都可以尝鲜。

无论是雪花飘,星星动还是粒子飞,其canvas实现都是一样的套路…

阅读全文…

【翻译】借助SVG实现背景透明JPG图片

2017年03月9日 by 张 鑫旭 阅读 43095 次, 今日 1 次

人物往往色彩丰富,有时候会遇到需要背景透明的场景,结果PNG24图片尺寸太大,PNG8质量太差,JPG尺寸最小效果还好,但是背景又不透明,有没有什么办法就有JPG的小尺寸好效果,同时背景透明呢?本文的处理技巧可能会对你解决相关问题提供一些思路。

阅读全文…

使用CSS offset-path让元素沿着不规则路径运动

2017年03月5日 by 张 鑫旭 阅读 56993 次

在web端,要让一个元素按照特定的路径运动,在之前,基本上只能借助于SVG SMIL animation来实现,但是,随着浏览器的发展,CSS代码也能实现这样的功能,本文就将介绍如何使用CSS中的offset-path属性让元素沿着不规则路径运动。有demo有截图还有gif演示,总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

了解CSS属性font-kerning,font-smoothing,font-variant

2017年02月23日 by 张 鑫旭 阅读 33786 次, 今日 1 次

本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothingfont-variant

阅读全文…

“蝉原则”与CSS3随机多背景随机圆角等效果

2017年02月17日 by 张 鑫旭 阅读 36876 次

在web设计或交互实现的时候,随机效果是非常常见的,比如说我们希望我们动画看上去运行的是更随机,则可以把动画分解为多个维度,例如水平移动,垂直移动以及旋转缩放等,然后不停的循环,然后很关键的一点就是每个维度动画循环的时间遵循“蝉原则”,这样最后实现动画效果就显得非常随机以及丰富等。

阅读全文…

小tips: 页面链接跳转历史URL不记录的兼容处理

2017年02月15日 by 张 鑫旭 阅读 50428 次

我们点击首页的“分类”进入分类页,然后分类页头部有个“男生”“女生”的频道切换,这两个都是直接的链接,如果就会带来这么一个问题,如果用户在“男生”“女生”的频道之间反复切换,则当我们点击左上角的返回按钮(如下图)的时候,就会发现点击很多次还是在“分类页”上,这其实是不符合用户预期的,正常的用户预期应该是点击左上角的返回按钮应该直接回到首页,而不是还在当前页过家家。

要实现思路并不难,就是“男生”“女生”频道切换的时候,URL地址不要进入历史URL记录堆栈,但如何实现同时保证各个浏览器都兼容是个问题,本文就将展示相关的实践,希望对大家的学习能够有所帮助。

阅读全文…

基于CSS3 column多栏布局实现水平滑页翻页交互

2017年02月15日 by 张 鑫旭 阅读 57392 次, 今日 2 次

column多栏布局和flex弹性布局基本上是同一时间段出现的,从兼容性来讲,column多栏布局一直以来更稳定更兼容,而flex弹性布局前前后后历经多个版本,直至现在有些移动设备支持依然不好,但是两者的命运却截然相反,column多栏布局鲜有人问津,而flex弹性布局则风生水起。面试的时候,就算面试者并未在实际项目中使用过flex弹性布局,也会时不时扯到这东西上来,好像不提flex布局就跟时代脱节一样,其实完全没有必要,每个CSS属性都有它的潜力和价值所在,挖掘其内在价值而不是单纯的被外在的那层表现困于庐山才是真正想要看到的。

而本文就是通过挖掘column多栏布局潜力实现了看上去很棘手的交互效果,这里特异分享给大家,希望能够对大家的学习有所帮助~

阅读全文…

JS获取上一访问页面URL地址document.referrer实践

2017年02月13日 by 张 鑫旭 阅读 157689 次, 今日 16 次

但是最近做了一个移动端项目,是我第一次在正式项目中使用document.referrer,这里跟大家分享一下相关的实践。

场景是这样的,移动端无论是原生app还是传统的网页,返回上页是一个比较强烈的需求,几乎所有的内页都有这么一个返回上一页的按钮。大部分场景下,上面办法可以满足我们的交互需求,但是,在有些时候……

阅读全文…

开源移动端元素拖拽惯性弹动以及下拉加载两个JS

2017年01月25日 by 张 鑫旭 阅读 53664 次

开源两个起点中文网M站两个动效交互JS,封装良好,即插即用。一个是任意元素屏幕拖移外带惯性边缘弹动效果,另外一个是基于窗体的下拉释放加载刷新效果。

阅读全文…