样式效果
2022/10/19 15:43:04
【circle-angle-tab-border】带边框的圆角选项卡
tab1
tab2
tab3
tab1
tab1
【frame-animation】逐帧动画
【filter-fusion】使用滤镜实现融合效果
【gradient-border】渐变边框
【relief-shadow】阴影
浮雕阴影
浮雕阴影
拟态按钮
【fault-animation】故障动画
【custom-hide-area】只允许右侧溢出
drag me
【clip-shape-shadow】为 clip 裁剪出的图形添加阴影和边框
【vague-switch】@property与mask实现模糊切换
Firefox 不支持 @property 属性
【inscribe-circle】内切圆角
【vision-deceive】视差滚动
IMG1
IMG2
IMG3
【muti-line-text-gradient】多行文本渐隐消失
Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam
【transparent-text】透明文字
Text
img Text
Gradient Text
Gradient Text
【dynamic-gradient】动态渐变
【collapse】纯css折叠面板
- 全部订单
- 待处理订单
【font-color】根据背景色自动切换黑白文字
自动变色
【auto-margin】margin:auto 实现水平垂直居中
【center-vertical】vertical 实现水平垂直居中
【circle-angle-tab】圆角选项卡
tab1
tab2
tab3
tab4
【clip-padding】同心圆
【curtain】实现帘幕效果
【custom-scroll】自定义滚动条样式
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?
【dynamic-underline】动态下划线
hover me
Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam
【hover-manu】纯css菜单
hover或focus时显示菜单
【paper】点击涟漪效果
【same-height-border】border 实现等高布局
1
1
1
1
【same-height】padding 实现等高布局
1
1
1
1
【scroll-infinite】无限滚动
元素数量
展示数量
【semicircle】透明半圆
【snake-border】蛇形边框
【tab】纯css选项卡
1
2
3
4
【toggle-display-status】clip-path 实现向右卷起效果
将鼠标放在红色区域内
元素会向右收起
【triangle-border】三角边框