CSS磨砂玻璃背景拟物化(Skeuomorphic)风格菱形水晶玻璃刻字效果Logo图标

磨砂图标

CSS磨砂玻璃背景拟物化(Skeuomorphic)风格菱形水晶玻璃刻字效果Logo图标

基于纯 ​CSS 实现的一款磨砂玻璃背景拟物化(Skeuomorphic)风格菱形图标,菱形图标由四个小菱形组合聚合到一起组成。仿佛是在塑料玻璃方块上雕刻出的图标一样,将这个图标陈列在木质板上...

CSS实现的 Neumorphism(新拟物风格)加载指示器动画效果

加载效果

CSS实现的 Neumorphism(新拟物风格)加载指示器动画效果

基于CSS创建了一个 Neumorphic 风格的加载动画,结合锥形渐变(conic-gradient)和 CSS 的其他重要变量,可以实现一个既美观又现代的效果。Neumorphic 风格强调...

纯CSS实现的3D旋转仿真相机图标

立体旋转相机

纯CSS实现的3D旋转仿真相机图标

可左右旋转的纯 CSS 实现的 3D 立体相机图标,具有黑色和亮白色两款颜色效果。 这款相机图标非常逼真,带有灯光照射下的影子移动效果。

CSS实现 Windows XP 关机动态图标,包含待机、关机以及重启三款动态图标

动态图标

CSS实现 Windows XP 关机动态图标,包含待机、关机以及重启三款动态图标

经典操作系统 Windows XP 点击关机("关闭计算机")按钮后的动画演示,页面中总共包括关机、待机以及重启三种状态图标,这三款图标用过Win XP系统的用户再熟悉不过了,是基于SVG矢量图...

基于纯CSS实现彩色纹理填充的明暗主题切换按钮

主题切换

基于纯CSS实现彩色纹理填充的明暗主题切换按钮

这是一个明暗主题切换开关,利用CSS的 :has() 属性将常见内容变暗,而不是使用JavaScript,整体非常的轻量级。并且还基于SVG实现了代表亮色主题的太阳图标以及晚上暗色主题的月亮图标...

CSS平底锅煎蛋过程动画效果开关切换按钮

状态切换按钮

CSS平底锅煎蛋过程动画效果开关切换按钮

假如煎蛋的过程可以当做切换按钮使用,你会不会很惊讶?今天就分享一款基于CSS动画实现的平底锅煎蛋来回翻滚效果搭配平底锅背景颜色的变化来实现切换按钮。其中JS负责切换事件,整体来看这是一款特别有创...

CSS黑色与白色两款带指示灯的翘板波动切换开关按钮

黑白翘板开关

CSS黑色与白色两款带指示灯的翘板波动切换开关按钮

基于CSS实现的两款简约风格翘板开关切换按钮,分别是白色款以及黑色款,按钮带绿色的指示小灯,当打开状态时指示绿灯点亮,关闭状态时绿色指示灯关闭。底层通过纯CSS样式在checkbox基本样式的基...

CSS仿苹果复制粘贴键盘,仅包含COMMAND+C+V三个键

苹果简易键盘

CSS仿苹果复制粘贴键盘,仅包含COMMAND+C+V三个键

网络上经常调侃说开发人员只需要懂ctrl+c复制和ctrl+v粘贴就可以了,为了满足开发人员的需求通过CSS设计了这么一款:开发人员唯一需要的 Apple 键盘!只包含COMMAND、C、V三个...

CSS带渐入/渐出过渡效果的纵向时间轴

垂直时间轴

CSS带渐入/渐出过渡效果的纵向时间轴

通过CSS实现的一个带渐入渐出效果的时间线组件,在该组件中,即将离开屏幕的项目会淡出,而当它们进入屏幕时又会淡入。并且该时间轴支持响应式布局,在桌面等大屏幕设备中呈现围绕时间轴两边内容布局的形式...

CSS+SVG带磨砂玻璃质感和瓷砖效果的高颜值自定义图标

自定义图标

CSS+SVG带磨砂玻璃质感和瓷砖效果的高颜值自定义图标

​基于CSS结合SVG实现地带有磨砂玻璃效果和彩色瓷砖的自定义图标ICON,错落的双层布局效果特别的有层次感。这种设计结合了透明度、阴影和颜色,可以营造出一种现代而高级的感觉。

CSS带滚动切换效果的简约暗亮主题开关按钮

亮暗切换

CSS带滚动切换效果的简约暗亮主题开关按钮

基于CSS实现的一款极简模式明亮黑暗切换按钮。这款切换按钮的手柄按钮和图标采用了类似混合模式的效果,按钮会随着交互的进行而滚动,而图标会随着交互进行旋转。其中的太阳河月亮小图标是通过SVG实现的...

CSS(碳-13)原子3D结构动态运动动画效果,可在Loading加载中或者网页背景使用!

原子加载器

CSS(碳-13)原子3D结构动态运动动画效果,可在Loading加载中或者网页背景使用!

​这个运动中的(碳-13)原子由 SVG 电子轨道和 "3D "CSS 质子和中子组成。非常适合于页面加载Loading期间使用,如果应用于医学或者化学等专业网站效果更佳!