• 跨站搜索
  • 搜游戏
  • 小程序
  • 区块资源
  • 免费资源
  • 搜转载

如何构建动画 CSS 温度计图表

如何构建动画 CSS 温度计图表
在本教程中,我将介绍创建纯CSS动画“温度计”图表的过程;跟踪单个目标实现情况的完美方式。我们正在建造什么这是我们将要创建的图表(点击重新加载以查看动画):SeethePen HowtoBuildaCSSThermometerChartbyEnvatoTuts+(@tutsplus) o...

如何从头开始构建 JavaScript 弹出模式

如何从头开始构建 JavaScript 弹出模式
在本教程中,我们将学习如何在不使用Bootstrap之类的框架或第三方库的情况下构建JavaScript弹出模式(弹出窗口)。我们将从头开始构建整个东西,让我们完全控制它的工作方式和外观。这是我们将要创建的演示:SeethePen HowtoBuildaModalWithHTML,CSS,&J...

SVG 过滤器简介

SVG 过滤器简介
在本教程中,我们将探索SVG滤镜的世界。使用SVG过滤器,您可以创建独特的文本效果、图像效果,并且使用一点JavaScript可以创建一些非常有趣的动态分形效果。在本教程中以下是我们将介绍的内容:什么是SVG过滤器?过滤器元素和过滤器基元应用SVG滤镜效果(演示)浏览器支持什么是SVG过滤器?要了解什么是SVG过滤器,我...

Tailwind CSS 简介:实用程序优先的 CSS 框架

Tailwind CSS 简介:实用程序优先的 CSS 框架
今天我将向您展示如何开始使用TailwindCSS,这是一个高度可定制的CSS框架,您可以使用它来快速构建自己的网页和组件。它通过提供一个类列表来工作,您可以使用这些类来控制页面的每个视觉方面。在本教程中这是即将发生的事情的细分。什么是顺风CSS?使用CDN版本的简单示例使用NPM版本的高级功能自定义TailwindCSS什么...

构建受 Netflix 启发的高级响应式菜单

构建受 Netflix 启发的高级响应式菜单
前几天,我通过手机访问了 NetflixJobs网站,并查看了它的画布菜单。我真的很喜欢每次击中它时都会触发的惊人动画。所以我认为以这个菜单为灵感,向你展示如何构建一个类似的响应式菜单可能是一个很好的练习。我们正在构建什么在开始之前,我希望你们都清楚地了解我们将要构建的内容:SeethePen Buildan...

使用 CSS 和 JavaScript 的快速全屏悬停效果

使用 CSS 和 JavaScript 的快速全屏悬停效果
在今天的教程中,我们将学习如何构建有用的全屏背景悬停效果。俗话说:“一图胜千言”,那么让我们看看我们要创建什么:SeethePen BuildaFull-ScreenBackgroundHoverEffectbyEnvatoTuts+(@tutsplus) onCodePen.在现实世界的场...

如何使用 Flexbox 构建自定义 Mega 菜单

如何使用 Flexbox 构建自定义 Mega 菜单
如果您想构建自己的包含大量项目、图像和列表的大型菜单,那么flexbox是适合您的工具。它将允许您创建一个内容感知、多列和多级的巨型菜单,在悬停时下拉——无需任何JavaScript或CSS调整。 在本教程中,我将向您展示如何使用flexbox布局模块创建以下下拉式巨型菜单:这不是一个简单的布局,因此我们将使用以下步骤创建...

如何使用 CSS 和 JavaScript 构建简单的甘特图(Gantt chart)

如何使用 CSS 和 JavaScript 构建简单的甘特图(Gantt chart)
到目前为止,在我们的CSS图表系列教程中,我们已经学习了如何创建不同类型的图表,包括条形图、温度计图表和饼图。今天,我们将通过在Ganttchart(甘特图)中构建和呈现数据来继续这一旅程。与其他图表教程不同,我们将大量使用JavaScript来实现图表的各个方面。您将能够将此基础用作未来项目的甘特图模板。我们正在构建的甘特图这是我们将要...

什么是 CSS-in-JS?( CSS-in-JS示例、优点和缺点)

什么是 CSS-in-JS?( CSS-in-JS示例、优点和缺点)
CSS-in-JS库为我们提供了一种编写CSS的新方法。他们旨在解决CSS的局限性,例如缺乏动态功能、范围和可移植性。尽管CSS-in-JS有其优势,但它是一项有争议的技术,因为许多开发人员询问是否值得进一步复杂化前端开发。 本文旨在为您提供CSS-in-JS库的高级概述。我们将研究这些库是如何工作的,它们解决了哪些问题...

如何创建带有粘性标题的时尚定价表

如何创建带有粘性标题的时尚定价表
粘性定价表非常适合展示具有一长串类似功能的产品和服务。在本教程中,我们将创建一个带有粘性标题的定价表;在此过程中,我们将学习如何在一定量的滚动后固定和取消固定元素。 我们正在构建的定价表对于这个动手练习,我们将设计一个定价页面,该页面将在定价表的列中包含不同的订阅计划。当我们向下滚动时,标题会变得粘滞以保持在视图中,然后将在稍后释放。带有...