缺口输入框
CSS双向缺口输入框，带有挖空区域的创意输入框这是一款通过CSS的mask遮罩效果实现的带有缺口圆角的创意输入框，两个带缺口的输入框连接到一起，结合部位放置了双向箭头，可用于输入位置或其他相互之间有交集的文本及符号。
文件夹图标
SVG实现的非矩形圆角几何形状设计，缺角的艺术！这是一款非矩形形状带有圆角的效果，基于SVG技术实现。通过SVG的路径（path）和圆角属性，可以创建出各种非矩形的复杂形状，并且这些形状的角落能够被平滑地圆化处理。这种效果不仅限于简单的四边形...
四角边框
HTML中基于CSS实现的4边角彩色圆弧边框这是一款通过纯CSS实现的彩色4角圆弧型边框，基于CSS的遮罩与圆角渐变等属性实现。设计思路：边框元素本身具有透明背景，因此可以透过元素看到背后的图像。此效果使用遮罩层与渐变相结合的技术，在四个...
提示框
纯CSS实现的轻量级高颜值工具提示（tooltip）插件这是一款简易的纯CSS工具提示（tooltip）效果，提供了圆角以及直角两种样式，不需要额外的伪元素。总共有上下左右四个开口方向的提示框设计。
拖拽边框
HTML中JS实现可拖拽的边框，验证CSS渐变边框与圆角的良好结合这是一款展示CSS渐变边框与圆角（border-radius）配合效果的互动演示，基于CSS技术实现。它证明了使用覆盖方法创建的渐变边框能够很好地适应圆角，而不会像使用border-image那...
圆角六边形
纯CSS实现的圆角六边形与精准悬停效果这是一款六边形带圆角的效果，基于纯CSS技术实现，不使用图片或边框。通过巧妙运用CSS的形状和变换属性，创建出一个具有圆角的六边形，并确保悬停动作仅在鼠标直接位于六边形本身上时触发，提供了精确且...
圆形图库
CSS创意圆形图库效果，圆形分割为6个扇形，每个扇形中填充图片这是一款圆形图库效果，一个圆形被平均分为六部分，然后在每个部分中都填充一张图片形成一种创意的画廊布局。当鼠标悬浮到扇形区域时，扇形区域开交变大，并且图片会有一个滑动过渡的效果。整个图库效果基于C...
趣味加载器
CSS趣味箱子图形跳跃、旋转、变换形态Loading加载中效果通过CSS的动画变换过渡效果实现的一款趣味箱子运动Loading预加载器，这款Loading加载中特效总共包含三组图形运动动画效果，第一组为四个圆角四边形按照顺时针追随旋转，第二组为三个图形像...
极简搜索框
HTML+CSS高颜值简约风格搜索框，带图标变换功能在HTML网页中实现的一款优异颜值的极简风格搜索框，当输入框获得焦点时，放大镜图标会变成箭头图标，失去焦点，箭头再次恢复为放大镜图标。蓝底色+圆角边框+白色图标+白色搜索文字组成了这款简约搜索框...
昼夜交替
HTML利用太阳和月亮作为滑块的曲线时间选择器，灵感来源于自然界的昼夜交替！基于CSS结合JavaScript技术在HTML中实现了一个独特的使用太阳和月亮作为手柄滑块的曲线时间选择器。这个设计灵感来源于自然界中的昼夜交替，用户可以通过拖动太阳和月亮手柄来选择一天中的...
顺时针旋转
CSS实现顺时针旋转背景刷新动画基于CSS @property 和 以及新特性 rotate-gradient 实现渐变背景顺时针旋转动画，一条分割线以一个点为中心围绕着圆角正方形旋转，渐变背景会从一个角度平滑地旋转到另一个...
饼干与牛奶
CSS实现「半杯牛奶+两片夹心饼干」主题视觉效果使用CSS的圆角属性和背景颜色来创建牛奶杯和饼干的形状，使用伪元素来添加牛奶的泡沫和饼干的纹理，使用阴影来增加立体感。这样的效果可以为网页增添趣味性和温馨感，特别适合节日或儿童主题的设计。