本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中使用的非常少，本文将罗列一些使用 mask 创造出来的有意思的场景。 语法 最基本，使用 mask 的方式是借助图片，类似这样： { mask: url(mask.png); mask: url(masks.svg#star); } 当然，使…
引言 在web应用中，前端同学在实现动画效果时往往常用的几种方案： css3 transition / animation - 实现过渡动画 setInterval / setTimeout - 通过设置一个间隔时间来不断的改变图像的位置 requestAnimationFrame - 通过一个回调函数来改变图像位置，由系统来决定这个回调函数的执行时机，比定时修改的性能更好，不存在失帧现象 在大多数需求中，css3的 transition / animation 都能满足我们的需求，并且相对于js实现，可以大大提升…
-webkit-font-smoothing字体抗锯齿渲染 下面这段代码是在学习 vue 的时候，启动项目时无意间看到根元素的样式属性，对 其中的-webkit-font-smoothing 的属性不太了解，百度了一番这里记录一下。 #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; te…
经常忘记参数的顺序及含义，做个总结方便日后查看 语法结构(简写) animation: name duration timing-function delay iteration-count direction fill-mode; 举例： .dom { animation: wang 3s linear 1s infinite alternate forwards ; } 含义： 动画名称：wang 动画持续时间：3 秒 动画速度：匀速 动画延迟：1 秒 动画播放次数：无限次播放 动画是否反向播放：是反向播放 动…
透明文字，模糊文字，镂空文字，渐变文字，图片背景文字，用 CSS 让你的文字也有 freestyle～ 前言 我们做页面涉及字体的时候，最多就是换个 color 换个 font-family，总是觉得没体现出你内心的文艺范，这时是不是抱怨 CSS 并没有给文字设置什么样式，抱怨是没用哒，我们自己动手，看看能不能“创造”出一些 CSS 字体样式呢～ 透明文字 用 rgba 调整透明度 div{ background-color: pink; color: rgba(0, 0, 0, 0.1); } 用 opacity…
