周报将 Web 动画大致分为三类：CSS 动画、SVG 动画 和 WebGL/Canvas 动画。所有的动画将按类别展示，方便读者有针对性的学习。 1. 《给个好评嘛》作者：Mert Cukuren 这是一个纯 css 实现的动画， <label> 的背景图片是星星，通过检查 …

我们平时在使用组件库的时候，input 相关的组件一般会有 autosize 这样的属性，设置以后使得文本域的高度能够根据文本内容自动进行调整，下面我们来看下是怎么实现的。 实现文本域的高度能够根据文本内容自动进行调整的思路很简单：监听输入相关的事件，获取到元素的内容高度，修改…

大家好，我是 Steven。 这个效果中文叫作骨架屏，英文叫 Skeleton，今期会跟大家分享在 CSS 上实现这个效果的方法。 打开 CodePen 编辑器，在 HTML 的部份加入一些结构，例如是一张卡片。 新增一个 &#x3C;div> 标签，class 名为 card…

在实际的开发中不管是移动端还是PC端都会遇到文本太长，因为宽度不够导致我们需要设置成省略号。文本就文本溢出做一个总结，希望对你们开发过程中有帮助。 如果将display: -webkit-box和text-overflow: ellipsis配合使用，文本将以省略号结尾。 我们…

本文不是一个大而全的课程，只是我们日常中常见的问题，因为网络安全是一个很大的话题，我们这里只介绍前端工程师应知应会的东西。大概包括 XSS, CSRF, 点击劫持，SQL注入，OS注入，请求劫持，DDOS，以及简单的防范策略。 XSS的英文是Cross Site Scripti…

女朋友常逛的设计网站这两天页面上多了下雪的效果，于是问我我的网站能下雪吗，作为一个程序员我一般会说实现不了，但是作为男朋友，不能说不行。 当然，最好的方式是用canvas来画。 因为tan(θ)=sy/sx，θ=Math.atan(sy / sx)，因为雨的线段默认是从上到下垂…

大家好，我是 Steven。 今期我们会介绍怎样实现 BiliBili 秋季 的那个顶部图片横幅效果，当游标移过去的时候，随着左右移动，会有景深和对焦的效果。 打开 CodePen 编辑器，在 HTML 的部份加入一个 &#x3C;header> 标签，然后里面加入六个 &#x…