基于纯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期间使用,如果应用于医学或者化学等专业网站效果更佳!

CSS带垃圾回收动画效果的创意删除按钮

删除按钮

CSS带垃圾回收动画效果的创意删除按钮

通过CSS实现的一款创意十足的删除按钮,一款普通的删除按钮都可以做出这么吸引人的动画效果一定会经验众人的。按钮上方有一个垃圾桶图标以及删除文案,点击删除按钮时,实现垃圾桶倾斜打开盖子,文案像垃圾...

CSS实现苹果官网液晶屏显示器3D旋转多方位展示效果

3D产品展示

CSS实现苹果官网液晶屏显示器3D旋转多方位展示效果

基于CSS技巧以及DIV实现的苹果官网令人叹为观止的显示器立体旋转展示效果。由于条件限制,旋转动画只实现了一小部分,如果有需求可以在此基础上进行扩展。就像苹果官网的广告词一样「征服双眼,震撼人心...

SVG + CSS轻量级旋转太阳Loading加载中效果

旋转加载

SVG + CSS轻量级旋转太阳Loading加载中效果

一款外形酷似太阳旋转且具有延迟和渐变遮罩效果的个性预加载器,其中「光线」等素材是通过SVG矢量图实现的,旋转收缩渐变效果是通过CSS实现的。非常轻量级简约的一款Loading加载中动画。

数字营销、商务咨询以及IT服务等企业服务网站专用Bootstrap模板

尹飞尼

数字营销、商务咨询以及IT服务等企业服务网站专用Bootstrap模板

「尹飞尼」是一款多功能且高度灵活的HTML响应式网站模板,专为技术驱动型行业网站量身定制。无论是B2B软件、创意机构、IT公司、咨询公司、商务服务、数字营销、软件开发、应用推广、金融科技、个人博...