Easy Slider（纯 CSS 轮播）

轮播是纯CSS交互功能的一个很好的例子。虽然轮播（又名滑块）通常是用JavaScript构建的，但如果我们删除复杂的功能，它们只是带有溢出的可滚动元素；CSS正是为此而生。您可能会想“CSS用于样式设计，而JavaScript用于交互，这就是网络的工作方式。”然而，考虑到CSS在网页上的加载速度比JavaScript更快，而...

创建一个 5 星评价功能

使用jQuery、AJAX和PHP构建一个5星评级系统，网站上的星级评定系统使用户可以轻松地提供反馈并帮助其他人做出选择。它为企业提供有关客户如何喜欢他们的产品的反馈。星级还有助于建立对网站及其产品的信任。所有主要的电子商务网站都使用评级来让买家知道他们可以从产品中获得什么样的质量。在本教程中，我将向您展示如何构建您自己的五星级评级系统...

13 个网页设计 CSS 动画库推荐

您知道吗，在1999年之前，只要Web开发人员和设计人员想要为网页上的项目设置动画，他们就只能使用Flash播放器和gif文件？在1990年代后期，CSS3的滚动引入了 悬停效果等动画属性。我们现在有许多动画属性，Web开发人员可以使用这些属性来创建视觉上吸引人的网页。好消息是，如果您可以访问各种动画库，则可以跳过...

创建 12 种不同的 CSS 悬停效果

在这个更新的教程中，我们将创建十种不同的CSS悬停效果和另外两种需要一点JavaScript的效果。我们将一路学习负载，包括如何为字体图标、边框、箭头、SVG路径设置动画，以及如何使用Lottie动画。您将能够将这些悬停效果应用于各种情况。让我们开始吧！为了让您了解在本教程中您将学到什么，请查看我们将构建的演示之一：SeetheP...

如何构建纯 CSS 加载动画（带关键帧）

动画是使网站更有趣的好方法；让我告诉你怎么做。大多数动画都以一种或另一种形式依赖于JavaScript，尤其是当它们处理复杂的序列或发生在用户交互（例如滚动或单击）之后时。但是，如果我们要构建一个根本不需要任何用户交互的简单动画，那么它可以完全使用CSS来完成。CSS加载动画演示在本教程中，我们将仅使用CSS构建带有移动元素的横幅。它使...

如何使用 CSS 制作动画气泡图

  我们介绍了大量使用CSS或/和JavaScript开发不同类型图表的技术。今天，我将向您展示如何使用CSS制作气泡图。我们正在建设什么这是我们将要处理的气泡图（点击重新加载以查看动画，将鼠标悬停在气泡上以显示工具提示）：SeethePen HowtoMakeanAnimatedBu...

预加载图像的最佳方式

要改善您网站上的用户体验，您可以做的最重要的事情之一就是确保人们不会花时间等待图像或其他元素的加载。网页及其所有内容的加载速度取决于很多因素，其中一些因素是您无法控制的。但是，作为Web开发人员，我们应该尽最大努力使浏览体验尽可能无缝。在本教程中，我将向您展示在网页上预加载图像以获得流畅用户体验的不同技术，使用JavaScript、CSS和...

使用 CSS3 创建一个很酷的动画导航

在过去的Web开发时代，开发人员在需要为他们的网站制作任何类型的动画时都依赖Adobe的Flash。随着时间的推移，人们放弃了Flash并开始在CSS和JavaScript的帮助下完成其中的许多事情。最后，借助CSS3和它现在享有的广泛浏览器支持，我们可以仅使用一些CSS3而不用其他任何东西来做一些非常了不起的事情。在...

如何在网站上创建动画雪花特效

如何使用CSS和JavaScript在网站上创建动画雪花特效？在本教程中，我们将使用CSS和普通JavaScript在网页上实现动画雪花效果，正好赶上假期。动画雪演示这正是我们在今天的教程中要做的。这是我们将构建的最终假日主题产品：SeethePen FallingSnowflakesbyEnvatoTu...

为响应式设计制作滑动侧导航菜单

在本教程中，您将使用JavaScript和CSS创建可扩展的侧边导航菜单。最终产品将如下图所示：SeethePen SimpleSideNavigationMenubyEnvatoTuts+(@tutsplus) onCodePen.1.创建标记首先，让我们为侧边菜单添加一些标记：<...