秀几种CSS背景渐变图片transtion过渡效果技巧

2018年03月25日 by 张 鑫旭 阅读 13933 次, 今日 11 次

background-image不支持CSS3 transition,因此,当CSS3 gradient渐变作为背景图片存在的时候,直接设置transition是不会有过渡效果的,那该怎么办呢?

阅读全文…

借助SVG文字尺寸自动缩放甚至突破Chrome 12px限制

2018年03月24日 by 张 鑫旭 阅读 7145 次, 今日 11 次

文字大小尺寸跟着容器的尺寸变化。这对于一些需要尺寸自适应的slogon内容就很实用,例如移动端320~414宽度间的自适应。纯CSS可以实现,但如果局部自适应实现就比较麻烦,canvas则效果不好,SVG实现则兼顾两者的优点……

阅读全文…

借助Web Animations API实现JS keyframes动画

2018年03月23日 by 张 鑫旭 阅读 6193 次, 今日 6 次

用一句话解释Web Animations API就是把CSS3实现的animation动画变成有JS代码实现。

各有优势。CSS3 Animations动画简单,灵活,复用性强,非常适合静态动画效果;Web Animations参数由JS控制,与单个元素绑定,因此非常适合不固定的动态动画效果,例如随机动画……

阅读全文…

玩转HTML5 Video视频WebVTT字幕使用样式与制作

2018年03月22日 by 张 鑫旭 阅读 10822 次, 今日 5 次

HTML5 Video视频支持支持外挂字幕,文件后缀名是.vtt,称为WebVTT格式,专门的web字幕格式。使用很简单,用一个<track>元素即可。并且字幕的样式是可以控制的。

阅读全文…

HTMLUnknownElement与HTML5自定义元素的故事

2018年03月20日 by 张 鑫旭 阅读 4940 次, 今日 3 次

我之前以为写一个规范以外的标签元素就是自定义元素,后来发现不是的。HTMLUnknownElement与自定义元素并不能直接相等,甚至可以说是陌路两人。

W3规范中,对自定义元素的定义是中间必须要有短横线(就是键盘上的减号)连接,并且浏览器也是这么认为的……

阅读全文…

小tips: 在canvas上实现元素图片镜像翻转动画效果

2018年03月18日 by 张 鑫旭 阅读 5653 次, 今日 6 次

CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了。但是在canvas中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位……

阅读全文…

CSS3 :default伪类选择器简介

2018年03月15日 by 张 鑫旭 阅读 7652 次, 今日 2 次

CSS3 :default伪类选择器作用设计的作用是让用户在选择一组数据的时候,依然知道默认选项是什么,否则其他选项一多,选着选着就不知道默认提供的是哪个了,算是一种体验增强策略。作用不是很强烈,但是关键时刻却很有用。

阅读全文…

CSS, SVG和canvas分别实现文本文字纹理叠加效果

2018年02月27日 by 张 鑫旭 阅读 9748 次, 今日 3 次

本文这里所说的叠加,就是混合模式中的叠加,也就是说,本文要实现的效果是,文字本身的颜色和纹理进行叠加,而非直接填充纹理。

CSS, SVG和canvas都能实现类似的效果,我们一个一个来看一下……

阅读全文…

小tips: 使用JS检测用户是否安装某font-family字体

2018年02月24日 by 张 鑫旭 阅读 10302 次, 今日 14 次

下午突发灵感,写了一段JavaScript小脚本,可以用来判断用户的操作系统是否安装了某字体,代码非常简单,使用也非常方便,性能也比较快,兼容性也非常好,在一些特殊的交互场景非常有用。总之,希望本文的内容能够对您的学习有所帮助。

阅读全文…

解决canvas图片getImageData,toDataURL跨域问题

2018年02月10日 by 张 鑫旭 阅读 12466 次, 今日 36 次

对于跨域的图片,只要能够在网页中正常显示出来,就可以使用canvas的drawImage() API绘制出来。但是如果你想更进一步,通过getImageData()方法获取图片的完整的像素信息,则多半会出错。

那有没有什么办法可以解决这个问题呢?

阅读全文…