CSS var变量的局部作用域(继承)特性

2019年01月26日 by 张 鑫旭 阅读 3062 次, 今日 16 次

CSS变量缩略图

最近做项目,发现CSS变量一个有意思的特性,那就是变量作用域非全局,于是,我们可以放心大胆使用CSS变量给伪元素传参了。这样,以前一些很啰嗦的实现现在就可以变得非常简洁。

阅读全文…

粉丝群第27期JS基础小测答疑文字版

2019年01月20日 by 张 鑫旭 阅读 5303 次, 今日 19 次

小测头图

讲讲JS正则表达式二三事,以及在这基础上制作的可视化工具,再讲讲不使用正则的傻白甜实现方法,并以此延伸一点关于技术人员职业发展的事情。

阅读全文…

常见的CSS图形绘制合集

2019年01月14日 by 张 鑫旭 阅读 8175 次, 今日 49 次

CSS图形绘制头图

展示40多个常见的纯CSS绘制图形,效果实时,含源代码,想要什么效果直接复制粘贴就好了。就算项目用不到,看看别人代码怎么写的也有助于提高CSS的基本功。

阅读全文…

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

2019年01月12日 by 张 鑫旭 阅读 5424 次, 今日 23 次

小测头图

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

阅读全文…

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

2019年01月11日 by 张 鑫旭 阅读 6431 次, 今日 19 次

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

阅读全文…

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

2019年01月10日 by 张 鑫旭 阅读 5397 次, 今日 27 次

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

阅读全文…

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

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

CSS box-decoration-break属性

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

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

阅读全文…

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

2018年12月25日 by 张 鑫旭 阅读 7119 次, 今日 16 次

表单与label与placeholder

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

阅读全文…

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

2018年12月24日 by 张 鑫旭 阅读 4781 次, 今日 13 次

天猫

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

阅读全文…

CSS vector-effect与SVG stroke描边缩放

2018年12月24日 by 张 鑫旭 阅读 2646 次, 今日 13 次

vector-effect文章头图

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

阅读全文…