Jekyll使用Sass

目录结构

├── _sass

| └── style.scss

├── css

| └── main.css

├── _site

├── ...

....

......

Media Query中的逻辑

原文地址:

关键字and

@media (min-width: 600px) and (max-width: 800px) {

html { background: red; }

}......

CSS Animation Steps

帧动画animation-timing-function: steps(n, <jumpterm>)

第一个参数表示动画分割的段数,第二个参数有以下值:

start 或 ......

CSS文本选择

原文参考:

全选

有时在点击元素的时候自动全选文字是很好的交互体验,这对需要复制粘贴的文本(比如代码片段,一次性密码,促销码等)尤其好用

可以只用一些简单的CSS来实现

div ......

CSS实现悬浮滑动预览动画

原文:

来自Netflix网站的一个交互效果:

用CSS就可以实现这个效果,需要做的几点是:

悬停时卡片保持宽高比放大

一个卡片悬浮时,其他卡片大小不变向外......