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就可以实现这个效果,需要做的几点是:

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

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

自动伸缩输入框

使用设置contenteditable属性的元素模拟实现

:empty伪类设置未输入时的内容,实现placeholder

[contenteditable=true]:empty:before ......

CSS Counter

CSS计数器可以让内容基于它在文档中的位置有不同的表现,例如可以使用计数器来为页面的标题自动编号。计数器本质是CSS维护的变量,依据CSS规则进行递增来记录使用次数。

相关属性

cou......