CSS SNIPPET

CSS代码片段

点击卡片的标题查看代码片段,或者点击分类名称查看该分类下的所有代码片段。

动画效果

弹跳动画载入指示器

创建一个弹跳动画的载入指示器。

效果演示

查看代码

按钮边框动画

为按钮创建一个鼠标悬停时的边框动画。

效果演示

查看代码

多纳圈旋转载入指示器

创建一个多纳圈旋转载入指示器,可以用来表示内容处于载入过程中。

效果演示

查看代码

缓动变量

可重用的缓动变量,可用于transition-timing-function 属性,比 内置的ease, ease-in, ease-outease-in-out更强大。

效果演示
Hover

查看代码

高度过渡动画

height未知的元素的高度从0动画过渡到auto

效果演示
Hover me to see a height transition.
content

查看代码

悬停阴影动画

为文本创建鼠标悬停时的阴影效果。

效果演示

Box it!

查看代码

悬停下划线动画

为文本创建鼠标悬停时的下划线动画。

Credit: https://flatuicolors.com/

效果演示

Hover this text to see the effect!

查看代码

交互体验

禁止选中文本

将内容设置为不可用鼠标选中。

效果演示

You can select me.

You can't select me!

查看代码

弹出菜单

在鼠标悬停或元素获得焦点时显示一个可交互的弹出菜单。

效果演示
Popout menu

查看代码

淡化兄弟元素

鼠标悬停时为兄弟元素增加淡化效果。

效果演示
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6

查看代码

页面布局

复位Box-sizing属性

复位盒模型,使 widthheight不受borderpadding的影响。

效果演示
border-box
content-box

查看代码

清理浮动

为子元素自动清理浮动。

Note: 这个方法仅适用于你还在使用浮动布局。请考虑使用现代方法

如flexbox布局或栅格布局。

效果演示
float a
float b
float c

查看代码

固定宽高比

让长度不定的元素响应式保持固定的宽高比。

效果演示

查看代码

用表格布局实现元素居中

将指定元素在其父元素内水平和垂直居中,使用 display: table而不是flexbox

效果演示
Centered content

查看代码

平均分布子元素

在父元素内平均分布排列子元素。

效果演示

Item1

Item2

Item3

查看代码

让图像适配容器元素

通过修改fitposition属性让图像填满容器元素并保持图像的宽高比。之前只能 使用背景图像和background-size属性实现。

效果演示

查看代码

用Flexbox布局居中元素

使用flexbox在父元素内水平和垂直居中子元素。

效果演示
Centered content.

查看代码

Ghost trick实现元素居中

将一个元素在另一个元素内垂直居中。

效果演示

Vertically centered without changing the position property.

查看代码

栅格布局实现元素居中

在父元素内使用grid布局将子元素水平和垂直居中。

效果演示
Centered content.

查看代码

自动填满容器剩余空间

让最后一个元素占满当前视口的剩余空间,缩放浏览器窗口也没影响。

效果演示
Div 1
Div 2
Div 3

查看代码

Lobotomized Owl选择符

为文档中所有跟随其他元素的元素自动设置继承的边界。

效果演示
Parent 01
Parent 02
Child 01
Child 02
Parent 03

查看代码

隐藏元素的离屏渲染法

完全隐藏元素但依然允许屏幕阅读器和JavaScript读取的安全的方法。 这个方法非常有助于存在视觉障碍用户需要更多上下文时的可访问性(ADA) 开发。可以替代display: none ,因为它不能被屏幕阅读器读取。 也可以替代visibility: hidden 因为它占用DOM的物理空间。

效果演示

查看代码

3列布局

使用display: inline-block水平对齐条目创建3列布局。

效果演示
placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

placeholder

30 Seconds of CSS

查看代码

用transform实现元素居中

在父元素内水平和垂直居中一个子元素。使用position: absolutetransform: translate() (作为flexboxdisplay: table的替代方案)。类似于 flexbox,这个方法不需要你知道 父/子元素的高度或宽度,因此对于响应式应用来说非常理想。

效果演示
Centered content

查看代码

截断超长文本为多行

将超出行宽的文本截断为n行并在结束部分淡出。

效果演示

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.

查看代码

截断超长文本

截断超过行宽的文本并在结尾添加省略号

效果演示

If I exceed one line's width, I will be truncated.

查看代码

其他

使用Calc()函数

calc()函数允许使用数学表达式定义CSS值,数学表达式的结果将作为属性的值。

效果演示

查看代码

常用的自定义变量

包含特定值的CSS变量,可以在文档中重用。

效果演示

CSS is awesome!

查看代码

视觉效果

有三角形的对话文本容器

创建一个顶部有三角形的文本容器。

HTML

效果演示
Border with top triangle

查看代码

用纯CSS画圆

用纯CSS创建一个圆形。

效果演示

查看代码

使用CSS计数器

计数器本质上是CSS维护的变量,计数器的值可以根据CSS规则递增, 以便跟踪其使用的次数。

效果演示
  • List item
  • List item
  • List item
    • List item
    • List item
    • List item

查看代码

滚动条样式自定义

在WebKit平台上自定义文档和可滚动元素的滚动条样式。

效果演示

Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

查看代码

文本选中效果自定义

修改被选中文本的样式。

效果演示

Select some of this text.

查看代码

文本首字下沉

设置第一段首字母比其他所有字母都大 - 通常用于表现一个新的 部分的开始。

效果演示

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo ligula quis tincidunt cursus. Integer consectetur tempor ex eget hendrerit. Cras facilisis sodales odio nec maximus. Pellentesque lacinia convallis libero, rhoncus tincidunt ante dictum at. Nullam facilisis lectus tellus, sit amet congue erat sodales commodo.

Donec magna erat, imperdiet non odio sed, sodales tempus magna. Integer vitae orci lectus. Nullam consectetur orci at pellentesque efficitur.

查看代码

实现动态阴影

基于元素自身的颜色创建类似于box-shadow 的阴影效果。

效果演示

查看代码

雕刻文本效果

为文本创建蚀刻效果,使其看起来像是在背景上雕刻出来的字。

效果演示

I appear etched into the background.

查看代码

表单样式的焦点随动

当表单中的输入元素获得焦点时,改变表单的样式。

效果演示

查看代码

使用全屏伪类

使用:fullscreen CSS 伪类的元素仅在全屏模式显示。

效果演示

Click the button below to enter the element into fullscreen mode.

I change color in fullscreen mode!


查看代码

渐变色的文本

为文本设置渐变色。

效果演示

Gradient text

查看代码

发丝边框实现

为元素设置1个原生设备像素宽度的细边框。

效果演示
text

查看代码

鼠标跟踪的渐变效果

为悬停鼠标的移动增加渐变效果。

感谢: Tobias Reich

效果演示

查看代码

导航条目的悬停与焦点效果

使用transform为导航条目添加炫酷的悬停和焦点效果。

效果演示

查看代码

使用:not选择符

:not 伪选择符有助于设置一组元素中除了最后(或指定)元素之外的所有其他元素的样式。

效果演示
  • One
  • Two
  • Three
  • Four

查看代码

滚动框溢出内容的渐变效果

为溢出元素添加淡出渐变,可以更好地提醒用户还有更多内容需要滚动查看。

效果演示
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Iure id exercitationem nulla qui repellat laborum vitae,
molestias tempora velit natus. Quas, assumenda nisi.
Quisquam enim qui iure, consequatur velit sit?

查看代码

美观的文本下划线

text-decoration: underline<u></u>的更好一些的为文本添加下划线的替代方案, 下行字母不会被下划线剪切。原生实现text-decoration-skip-ink: auto对下划线 的控制能力比较弱。

效果演示

Pretty text underline without clipping descending letters.

查看代码

复位所有样式的简单方法

使用一个属性复位所有样式为默认值。这不会应用directionunicode-bidi 属性。

效果演示
Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure id exercitationem nulla qui repellat laborum vitae, molestias tempora velit natus. Quas, assumenda nisi. Quisquam enim qui iure, consequatur velit sit?

查看代码

锯齿形的区域分隔效果

使用一个SVG形状分隔两个不同的块,从而创建出与标准的水平分隔相比 更加有趣的视觉效果。

效果演示

查看代码

使用系统原生字体

使用操作系统的原生字体获得接近原生app的体验。

效果演示

This text uses the system font.

查看代码

用纯CSS创建切换开关

只使用CSS创建一个切换开关。

效果演示

查看代码

用纯CSS创建三角形

使用纯CSS创建一个三角形。

效果演示

查看代码

斑马条纹背景的列表

创建一个具有交替背景色的列表,对于区分有跨行内容的兄弟条目很有帮助。

效果演示
  • Item 01
  • Item 02
  • Item 03
  • Item 04
  • Item 05

查看代码