卡卡网

前面介绍过几款css timeline时间线，本文介绍的CSS timeline时间线与前面的不同之处是，可为任何节点设计一个动画样式，以凸显该节点的标题和内容。

CSS loading 加载动画用于程序加载过程中的显示，它的作用是告诉用户程序还在进行中，不要关闭窗口。本文介绍用纯CSS来实现一个loading加载动画。

本文给大家介绍一款按钮的鼠标悬停效果，是纯CSS实现的，鼠标移上按钮后，按钮背景颜色随之变化。这个效果使用非常广泛，非常多的网页都用上了这个效果。

传统的灰色纯色边框你是不是觉得太难看了？本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框。

本文给大家介绍6款精美漂亮的CSS Tabs选项卡，它们有着漂亮的样式，让人看着舒服的过渡效果，值得推荐收藏使用。

本文给大家介绍10款纯CSS实现的tabs选项卡，它们均无用到第三方插件，也没需要用到jquery库文件，因此迁移非常方便，把代码拷贝过去就能用，值得推荐使用。

前面介绍过漂亮的CSS动画进度条，本文更进一步，介绍带有文本表示（百分比）的CSS动画进度条，这样的进度条用户体验会更佳。

本文介绍3个漂亮的CSS动画进度条，它们都是用纯CSS来实现的，但进度条样式设计得很漂亮，值得推荐使用。

这是一个带有 8 个加载图像的 SVG 动画实例，这个例子非常适合用作加载(loading)动画。 实例介绍这几个加载动画都是使用 HTML + CSS + SVG 实现的。

本文介绍一个播放器进度条，它具有可拖动的手柄。

今天要介绍的是矩形（动画）进度条，有11个实例。值得一提的是，今天介绍的矩形进度条，绝大部分是纯CSS实现的。

前面介绍过圆形/径向进度条和步骤进度条，今天将介绍7款另一形式的进度条——圆角进度条。这些进度条多用于表示加载进程。

步骤进度条能清晰的给用户显示整个操作流程的每一个过程阶段，因此在项目进度条设计中，常常用到步骤进度条。本文将介绍4款步骤进度条的实例。

进度条通常包括进度的数字（百分比）和动画表示，这提高了进度条的清晰度，增加了用户体验，本文介绍4款圆形/径向进度条。

今天给大家介绍8款CSS动画背景(飞扬文字/旋转方块/粒子动画/旋转的正方形。。。)。这些动画背景使用CSS3实现，通过使用CSS3 transition 和 animation 等属性，动画开发变得不再困难。

使用 CSS 来创建时尚的动画和视觉效果，你不需要了解 JavaScript 甚至 HTML，本文将给大家介绍5款CSS动画背景。

本文介绍一个流星雨效果的动画背景，它是纯CSS实现的，无需用到JavaScript，也无需用到第三方插件，喜欢的朋友可以直接复制代码使用，非常方便。

此动画为你的背景添加了深度错觉，从而创建了视差滚动星星效果。它使用一个简单的 SASS 函数（在每次加载时创建一个随机星域）和 CSS 动画关键帧。

这是一个粒子动画，不需要 JavaScript 来构建它。这个背景的整个想法是让粒子随机移动。

本文介绍的CSS动画背景是——对角线颜色渐变。实例简介使用零 JS 创建此 CSS 动画背景示例。

本文介绍10款纯CSS实现的弹窗（模态弹窗 - modal popup)，它们均无使用jQuery或Javascript，代码复制过去就能用，程序迁移非常方便。

弹出窗口在网页设计中十分常用，本文介绍4款模态弹窗(modal popup)，这几款弹窗都是响应式的。

导航栏菜单不应该做得呆板生硬，加上下横线平滑过渡效果让菜单在交互中变得更加有趣生动。本文介绍3款有下横线平滑过渡效果的导航栏菜单。

本文将介绍一个图片自动轮换淡入淡出效果的实例，本实例代码简单，创建简便。

幻灯片/轮播动画有各种各样的效果，本文介绍一个百叶窗过渡的效果，喜欢的朋友可以直接下载源码使用。

Bootstrap 4 Carousel 的幻灯片默认是滑动过渡的，如果你想更改为淡入淡出过渡，那么可以参考下本文介绍的方法。

本文介绍的幻灯片/轮播实例，具有淡入淡出的过渡效果，除了能自动轮播外，还可以手动点击按钮向左向右滑动。是一款比较流行的幻灯片/轮播动画。

本文介绍一个纯CSS实现的左右滑动幻灯片，这个基于 CSS 的幻灯片插件具有多种质量功能。这些可以帮助导航整个网站的页面。

本文介绍一个纯CSS实现的幻灯片/轮播效果。此幻灯片的设计更侧重于高级动画。

网络幻灯片是一系列图像或文本，在特定时间间隔内按顺序显示一个元素。在这篇教程中，你可以按照以下简单步骤，使用 HTML、CSS 和 JavaScript 创建幻灯片。

在本文中，我将向你展示如何使用 span 标签使你的内容的某个部分与其他部分区别开来。

本文介绍10个最好的定价表示例，无论你是希望自定义自己的代码还是仅重用现有代码以节省时间和金钱，它们都非常适合用作模板。

我们都知道文件输入框(File Input)在自定义方面非常有限，本教程将指导你完成构建 jQuery 插件的过程，使用jQuery、CSS3自定义文件输入框(File Input)。

要将渐变叠加添加到文本元素，我们需要为要设置样式的文本设置三个不同的 CSS 属性。

本文给大家介绍16款精美的CSS3动画按钮，鼠标移到按钮上，按钮有动画效果。

有的情况，提交表单需要多个步骤来完成，很多人是通过页面转换来是实现过程设计，其实，我们可以在一个页面就完成这个功能，正如本文介绍的，jQuery和CSS3实现有进度条的多步注册表单 。

在表单里加上浮动占位符(Placeholder)，这样的表单设计越来越多人使用了。本文就给大家介绍一个带有浮动占位符(Placeholder)和光亮按钮的登录表单。

弹出DIV层的设计在网页交互中常常用到，比如注册/登录表单，详细信息的显示等等。今天，我将分享一个常见的弹出DIV层的效果，是响应式的模式弹窗设计效果。

今天，我要介绍的是，一个非常漂亮的响应式导航栏设计，这个导航栏做得非常用心，哪怕一个边角，都是精雕细琢的精致设计。

现在的网页设计多是响应式的了，而菜单又是网页里用户交互最多的最醒目的一部分，因此这个设计往往就更重要。本文介绍一个简单却实用的响应式导航设计。

本文介绍几个常见的鼠标悬停效果。这几个效果比较相近，主要是当鼠标移到和移出按钮时，按钮边框颜色或阴影的变化效果。

当鼠标移到按钮上时，按钮边框出现过渡动画效果，这在现在的按钮交互设计中十分常见。本文将介绍6个CSS按钮边框过渡动画效果。

关闭图标不用小图片，只用CSS，就能轻松实现。本文将给大家介绍如何用CSS来实现一个关闭按钮图标（X）。

现在的网页设计中要求弹出窗口时，不再是普通的popup旧式弹窗了，本文将介绍 Bootstrap 3 & AngularJS 模态对话弹出窗口的设计。

本文介绍一个CSS按钮，它具有伸缩（鼠标悬停）效果，即是当鼠标放上时，按钮伸长，当鼠标移开后，按钮缩短。这个效果在很多网页上都挺常见的，它多用于“更多”的按钮设计上。

本文介绍7个按钮悬停效果，它们是由box-shadow实现的。

本文介绍CSS Wave 波浪效果，这效果在很多产品网页上使用，它给人的视觉效果确实很好。本实例实现的 Wave 波浪效果，无需用到图片，仅用了CSS来实现动画效果。

多数情况下，我们都不想用input file文件上传控件的默认样式，其实，我们可以很轻松的使用很少的代码，就能改变上传控件的默认样式。

文件上传按钮默认无样式，现在应该没有网页或UI设计人员会用默认的按钮了，本文就介绍如何实现上图的文件上传按钮。

默认的下拉菜单样式有点呆板，使用体验不是很好，因此，本文给大家介绍一个漂亮的CSS下拉菜单设计。