粉丝群第1期CSS小测点评与答疑

2019年01月12日 by 张 鑫旭 阅读 15078 次, 今日 8 次

小测头图

上周新建了一个粉丝群,周三发小测题目,每周依次是CSS、DOM和JS,周六上午答疑,答疑方式是直播加群聊。然后今天上午进行了第一次的直播答疑,是一个简单的CSS布局问题,本文可以看成是本次答疑的文档版。如果你也想要加入粉丝群,可以参见文末的信息。

阅读全文…

分享三个纯CSS实现26个英文字母的案例

2019年01月11日 by 张 鑫旭 阅读 15539 次, 今日 9 次

本文展示三个CSS生成26个字母的案例,旨在展示CSS在图形绘制方面的潜力,同时这些案例也是非常好的CSS图形绘制学习材料。希望本文内容对您的学习有所帮助。

阅读全文…

小tips: 纯CSS实现打字动画效果

2019年01月10日 by 张 鑫旭 阅读 20037 次, 今日 11 次

本文主要介绍如何使用CSS实现类似打印机一样的文本打字效果,展示了共两种方法,分别适用于纯中文场景,以及中英文混合场景,这种效果在线简历,或者一些运营活动上比较合适。希望本文内容可以对你的学习有所帮助。

阅读全文…

CSS/CSS3 box-decoration-break属性简介

2019年01月5日 by 张 鑫旭 阅读 12354 次, 今日 5 次

CSS box-decoration-break属性

CSS box-decoration-break属性可以指定元素片段在跨行、跨列或跨页(如打印)时候的样式渲染表现。

默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分,借助box-decoration-break属性,可以让换行,或者换列的各部分元素按照独立的样式进行渲染,活用这种特性,可以让我们的布局和样式表现更上一层。

阅读全文…

CSS :placeholder-shown伪类实现Material Design占位符交互效果

2018年12月25日 by 张 鑫旭 阅读 17856 次, 今日 4 次

表单与label与placeholder

Material Design规范中占位符交互效果是这样的:focus输入框的时候,placeholder会位移到左上角作为一个label存在。以前我们要实现这种效果只能借助JavaScript,实际上,纯CSS就能搞定之,就是借助:placeholder-shown伪类实现。且目前在移动端兼容性不错,可以在实际项目中应用。究竟如何实现?有没有这么神奇?一起进来看看吧~

阅读全文…

从天猫某活动视频不必要的3次请求说起

2018年12月24日 by 张 鑫旭 阅读 16021 次, 今日 8 次

天猫

我们在移动端做H5开发的时候,有时候会用到MP4视频,对于一些酷效果,是性价比最高的方式。然而,很多前端开发在使用这些视频的时候没有注意,或者根本就不知道视频的某些信息的位置会影响浏览器的请求个数,从而影响网页性能。

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日 by 张 鑫旭 阅读 10915 次, 今日 6 次

vector-effect文章头图

默认情况下,我们改变SVG图形尺寸,stroke描边宽度也会跟着一起变化。有时候,我们希望描边宽度一直不变,怎么办呢?可以试试使用vector-effect属性。

阅读全文…

CSS ::backdrop伪元素是干嘛用的?

2018年12月22日 by 张 鑫旭 阅读 13398 次, 今日 18 次

backdrop头图

CSS ::backdrop伪元素可以控制视频,弹框或者普通全屏元素的黑色蒙层背景样式的。兼容性还很不错,实际项目中可以用一用。

阅读全文…

周知:CSS -webkit-伪元素选择器不再导致整行无效

2018年12月17日 by 张 鑫旭 阅读 11075 次, 今日 27 次

-webkit-与伪元素

通常,如果选择器链或组中有无效的伪元素或伪类,则整个选择器列表无效。如果伪元素(但不是伪类)具有-webkit-前缀,那么对于Firefox 63+,Blink、Webkit和Gecko浏览器认为它是有效的,而不会使选择器列表无效。

阅读全文…

使用wavesurfer.js显示mp3 audio音频的波形图

2018年12月9日 by 张 鑫旭 阅读 21301 次, 今日 28 次

波形图

如果你想实现右图所示的波形图效果,可以借助wavesurfer.js。wavesurfer.js上手简单,扩展丰富,有多达35个可选参数,什么音频速率控制,波形图大小尺寸啊,都完全不在话下。还有好多种方法,对了,还有很多额外的插件,丰富的使用案例。

基本上,你要想对音频进行解析,显示个图形啥的,不要多想了,就wavesurfer,童叟无欺,老少皆宜,居家旅行,开发必备。

阅读全文…