如何使用 Javascript 更改 CSS

既然我们可以用 Javascript 选择 HTML 元素,我们也可以直接改变它的 CSS 样式。我们可以将其与其他 Javascript 函数结合起来,根据用户的交互改变用户对网站的体验。

使用 Javascript 更改 CSS#

在基本层面上,我们可以使用属性访问元素 CSS&nb[……]

继续阅读

现代CSS 100天:第 6 天::has() 伪类

是时候让我跟上现代 CSS 的速度了。
CSS 中有很多新东西我知道的太少了。
为了改变这一点,我开始了#现代CSS100天。
为什么或多或少现代 CSS?
因为有些主题将是关于尖端功能的,而其他主题已经存在了很长一段时间,但我对此几乎没有经验。

:has()允许您检查父元素是否包含特定的子元素。[……]

继续阅读

使用 CSS 平滑缩放背景图像(免费代码)

在本文中,您将学习如何使用 HTML 和 CSS缩放背景图像。如今,图像中添加了不同类型的平滑缩放效果。大多数背景图像缩放仅由 CSS 创建。

所以在这里我将向您展示如何使用 CSS 缩放图像。CSS 缩放效果基本上有两种,一种是放大,一种是缩小。我将在这里向您展示两种类型的设计。所以在这里您将知道如[……]

继续阅读

如何使用 Git Hooks 自动压缩 CSS 和 JS

当您将代码推送到生产环境时,理想情况下您希望压缩客户端的 Javascript 和 CSS 文件。一些开发人员仍然手动执行此操作,但如果您使用 Git,自动执行此操作非常容易。

1. 下载组件#

在本教程中,我将使用 Node.JS 组件 – 因此您需要安装 Node.JS。您将需要的两[……]

继续阅读

如何使用 CSS 创建脉冲动画(代码 + 演示)

CSS Pulse Animation我们在网页的不同位置看到它。Pulse Animation 用于使不同的 UI 元素变得有趣。

在这里,我们将讨论如何使用 CSS 创建脉冲动画。在这里,我分享了不同类型的设计,例如简单脉冲动画 CSS、按钮脉冲动画、文本脉冲动画、图像脉冲动画、悬停脉冲动[……]

继续阅读

CSS 单个变换属性

CSS 变换是在 CSS 中平移、旋转和创建 3d 对象的有用方法。我之前在这里介绍了 CSS 变换是如何工作的,我还创建了一个3d Minecraft 鸡来展示如何使用它们来制作 3D 动画对象。

在这个简短的指南中,我想介绍一个事实,即最近 CSS 对 CSS 转换进行了一些更改。以前,语[……]

继续阅读

现代CSS 100天:第 5 天:max()函数

是时候让我跟上现代 CSS 的速度了。
CSS 中有很多新东西我知道的太少了。
为了改变这一点,我开始了#现代CSS100天。
为什么或多或少现代 CSS?
因为有些主题将是关于尖端功能的,而其他主题已经存在了很长一段时间,但我对此几乎没有经验。

该max()函数采用逗号分隔的表达式列表。将选择列[……]

继续阅读

现代CSS 100天:第 4 天:min() 函数

是时候让我跟上现代 CSS 的速度了。
CSS 中有很多新东西我知道的太少了。
为了改变这一点,我开始了#现代CSS100天。
为什么或多或少现代 CSS?
因为有些主题将是关于尖端功能的,而其他主题已经存在了很长一段时间,但我对此几乎没有经验。

该min()函数采用逗号分隔的表达式列表。将选择列[……]

继续阅读

现代CSS 100天:第 3 天:逻辑属性速记

现在是时候让我快速了解现代CSS了。
CSS中有很多新的东西,我对它知之甚少。
为了改变这一点,我开始#现代CSS100天。
为什么或多或少是现代的CSS?
因为有些主题将是关于尖端功能的,而其他东西已经存在了很长一段时间,但我几乎没有这方面的经验。

如果您使用速记属性(如所有 4 个值),则无论[……]

继续阅读

现代CSS 100天:第 2 天:逻辑属性

现在是时候让我快速了解现代CSS了。
CSS中有很多新的东西,我对它知之甚少。
为了改变这一点,我开始#现代CSS100天。
为什么或多或少是现代的CSS?
因为有些主题将是关于尖端功能的,而其他东西已经存在了很长一段时间,但我几乎没有这方面的经验。

逻辑属性是一种处理方向和维度的新方法,它允许您[……]

继续阅读