南城FE的博客_CSS那些事

纯CSS实现有趣emoji切换开关

这是一个纯CSS创建的动画切换开关，它不仅能够在视觉上吸引用户，还能通过交互提供即时反馈。本文将解析源码的核心实现逻辑，这个项目的核心是使用CSS变量、3D变换和过渡效果来实现一个动态的、响应式的用户界面元素。关键技术点 CSS变量：用于动态调整样式。 3D变换：用于创建翻转动画效果。过渡效果：用于平滑地改变元素的样式。 emoji：并不是真正的emoji而是通过CSS绘制。实现步骤

CSS

3D

前端

原创精选 2024-09-29 20:26:29 227 阅读 1收藏 私藏项目实操分享

CSS 终于在 2024 年增加了垂直居中功能

本文翻译自 CSS finally adds vertical centering in 2024，作者：James Smith，略有删改。在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。 <div style="align-content: center; height: 100px;"

html

垂直居中

CSS

原创 2024-08-29 14:00:45 109 阅读 yyds干货盘点

不使用 JS 纯 CSS 获取屏幕宽高

在现代前端开发中，获取屏幕的宽度和高度通常依赖于 JavaScript。然而现代 CSS 也可以获取到屏幕的宽高，通过自定义属性（CSS Variables）和一些数学函数来实现这一目标。本文将详细解析如何使用 CSS 的 @property 规则和一些数学运算来获取屏幕的宽高，严格的说是获取视口的宽度和高度。使用CSS获取屏幕宽高仅是一种实现方式，部分属性和数学函数有一定的兼容性问题，所以线上

CSS

css

前端

原创精选 2024-08-27 10:51:26 224 阅读私藏项目实操分享

CSS炫酷光晕按钮特效

一个很炫酷的发光按钮特效，鼠标悬停时，按钮呈现旋转动画发光的效果，这样的动画效果可以显著提升用户体验和视觉吸引力。本文将解析如何实现这个按钮特效

css

动画

前端

按钮

原创精选 2024-08-19 09:35:08 388 阅读私藏项目实操分享

CSS萤火虫按钮特效

如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点：有一个跟随鼠标移动的圆点按钮悬停时有高亮发光的效果悬停时按钮周边的萤火中效果实现过程跟随鼠标移动的圆点这个部分需要基于JS实现，但不是最主要的实现代码如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐

悬停

css

前端

原创 2024-08-12 09:46:23 173 阅读

螺旋文字滚动特效源码解析

如图所示，今天看到一个很炫酷的双文字螺旋滚动特效，两行文字呈螺旋状变化，在网站中这样的效果对用户很有吸引力。本文将基于原网站解析如何实现这个炫酷的效果，基于这个动图可以分析出需要实现的要点：文字呈螺旋状滚动滚动过程中文字大小变化动画过程无缝链接两行文字滚动实现过程文字展示为了方便更改文案将文案定义变量，通过JS代码动态创建DOM，定义文案、螺旋的角度以及动画的持续时间： con

动画效果

文字滚动

前端

CSS

原创精选 2024-07-31 09:35:11 328 阅读

纯 CSS 实现计时器效果

如何使用CSS技术，包括CSS计数器、@property规则、伪元素和@keyframes动画，来创建一个纯CSS的计时器效果。

CSS

前端

动画

原创 2024-06-07 18:47:37 351 阅读 yyds干货盘点

纯CSS实现丝滑边框线条动画

纯CSS基于两个元素的1像素间距透出边框线条，配合使用`backdrop-filter`设置纯背景模糊效果，实现炫酷边框线条动画

css

动画效果

前端

原创精选 2024-05-27 12:40:10 954 阅读

减少样式计算的范围和复杂度

本文翻译自 Reduce the scope and complexity of style calculations，作者：Jeremy Wagner，略有删改。 JavaScript通常用来改变页面的视觉效果。比如通过改变style样式或者通过计算后改变页面布局，比如搜索或排序数据。长时间运行的JavaScript可能是导致性能问题的常见原因，应该尽可能地减少它的影响。样式计算通过添

选择器

css

前端

原创 2024-03-31 13:20:48 99 阅读

CSS图像边框：Interop 2023的一个重点领域

本文翻译自 Border images in CSS: A key focus area for Interop 2023，作者：Dipika Bhattacharya，略有删改。 Interop 2023是一项提高Web的互操作性为目标，以达到每种技术在各浏览器中完全相同的状态。（来源：Interop 2023）在Interop 2023中，CSS图像边框被确定为一个关键的重点领域。这个

前端

CSS

图像边框

原创 2024-02-27 09:43:36 35 阅读

炫酷鼠标悬停随机渐变文本动画效果

本文详细解析了用代码实现一个炫酷鼠标悬停渐变随机文本的动画效果，将这个效果应用到你的网站中，相信会大大的提升用户交互体验。有兴趣的朋友可以尝试看看～

css

前端

动画

原创精选 2024-01-02 09:21:09 342 阅读

[译]你应该知道的多个HTML属性

本文翻译自 13 HTML Attributes You Should Know About，作者：Shefali，略有删改。在HTML中，属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性，它们可以增强网站的视觉吸引力。接下来开始吧！? Accept 属性您可以将accept属性与<input>元素（仅用于文件类型）一起使用，以指定服务器可以接受

html

HTML

前端

原创精选 2023-12-08 09:24:01 247 阅读

[译]你需要知道的CSS属性isolation

大家好！?今天我想谈谈一个CSS功能，在我看来没有得到太多的关注。但它应该被关注！我说的就是`isolation`属性！

CSS

前端

层叠上下文

CSS布局

原创 2023-12-07 09:19:36 93 阅读

[译]原生CSS嵌套使用

CSS嵌套是一个重要的功能，它将增强我们编写CSS的能力。目前使用嵌套是可行的，但需要注意受众情况，因为目前对支持程度仍然较新。

CSS

嵌套

前端

原创精选 2023-12-06 09:36:30 326 阅读

纯CSS实现炫酷背景霓虹灯文字效果

本文详细解析了如何利用CSS的来创造炫酷动态渐变背景和霓虹灯文字效果。这种动效不仅对于前端开发者有启发，也为设计师和内容创作者提供了新的视角，去探索网页设计的无限可能性。

CSS

css

前端

动画

交互

原创精选 2023-12-04 09:44:59 631 阅读

CSS技巧：从高度0过渡到自动高度

本文翻译自 CSS trick: transition from height 0 to auto!，作者：Francesco Vetere，略有删改。如果你在CSS上花了足够长的时间，很可能你曾尝试过从height:0到auto的平滑过渡。。。却发现它不起作用！? ️幸运的是现在有一个解决这个问题的方法：使用CSS Grid布局可以解决这个问题，而且代码简单，运行的很完美。让我们从一个

CSS

css

前端

动画

原创精选 2023-12-02 13:19:28 537 阅读 1点赞

纯CSS实现炫酷文本时钟

如图所示这是一个纯本文时钟效果，和传统的时钟不一样，没有表盘，也没有完整到每一分钟的数字表示当前时刻。在这个时钟中，当前时间通过文本显示，显示的文本时间误差为+/- 4分钟，以明亮的颜色突出显示当前时间，而其余字母则较暗。实际上这是一个实现很复杂的时钟，因为只使用CSS实现，JS只需要获取初始化的时间，如果页面是使用服务端选择则不需要这个初始化的JS。以下是本次实现的主要几点：整体文本

CSS

前端

动画

时钟

原创 2023-11-21 08:33:00 196 阅读

纯CSS实现炫酷文本阴影效果

如图所示，这是一个文本阴影效果，阴影有多个颜色，鼠标悬停时文本阴影效果消失，文本回到正常的效果。让我们逐步分解代码，看看如何使用纯CSS实现这个效果的。基于以上动图可以分析出以下是本次实现的主要几个功能点：文本有多个颜色的阴影的效果文本有空心镂空的效果鼠标悬停时文本回到正常效果鼠标悬停时英文字体的粗细有变化实现过程多层颜色阴影文字的阴影用text-shadow实现，但是一般情

css

阴影效果

前端

动画

原创精选 2023-11-20 15:21:16 483 阅读

纯CSS动态渐变文本特效

如图所示，这是一个炫酷的文本渐变效果，如同冰岛的极光一般。本次的文章让我们逐步分解代码，了解其实现原理。基于以上动图效果可以分析以下是本次动效实现的主要几点：文本中有多个颜色的动画每个颜色显示的半径不同，有大有小整体动画是有规律的重复进行着实现过程接下来开始正式的代码实现过程，通过以上可以分析出会有多个元素来实现颜色的动画，每个元素的动画轨迹和运行速度不一致，但当多个不同颜色的元

CSS

混合模式

渐变

前端

原创精选 2023-11-19 16:48:42 455 阅读

纯CSS实现魔法渐变边框卡片

如图所示，这是一个很炫酷的卡片效果，关键效果在于卡片的边框呈渐变色变化着，在网页中有这样一个卡片相信可以极大的增强用户体验交互。本次文章将解读如何使用纯CSS实现这个炫酷的卡片效果。基于上面的动图可以分析出以下是本次实现的主要几点：卡片的边框是渐变色卡片的边框呈顺时针动画卡片底部还有阴影随着边框动画而变化鼠标悬停时动画隐藏显示静态的卡片实现过程看到这样的边框首先要想到的是CSS

css

前端

用户卡片

魔法卡片

原创精选 2023-11-13 12:49:15 609 阅读

Photoshop Web版本用了哪些CSS技术

本文介绍了Photoshop Web版本使用的一些CSS技术。与国内常见的CSS技术相比，有许多不同之处，其中很多部分值得学习和借鉴。

CSS

Photoshop

css

前端

原创精选 2023-11-07 08:26:34 373 阅读

使用CSS圆锥渐变创建背景图案

本文翻译自 How to create background pattern using CSS & conic-gradient，作者： Temani Afif，略有删改。拥有一个好的背景图案可以使你的网站设计与众不同。多亏了CSS渐变，我们可以使用几行代码创建花哨炫酷的图案。在这篇文章中，我们将学习conic-gradient并使用它来创建不同的CSS图案。圆锥梯度如何工作？

css

CSS

前端

背景

渐变

原创精选 2023-10-16 09:34:47 296 阅读

CSS小技巧之单标签loader

本文翻译自 How to create a CSS-only loader with one element，作者： Temani Afif，略有删改。 loader组件是网站的重要组成部分。它可以用在许多地方，我们需要显示的内容正在加载中。这样的组件需要尽可能简单，在这篇文章中我们将学习如何使用优化的代码创建不同的CSS加载器。所有的loader它们只需使用一个元素，我们将剖析其中一些元

加载器

CSS

前端

loader

原创精选 2023-10-15 15:08:15 425 阅读

Chrome 118 版本中的新功能

Chrome

浏览器

前端

CSS

原创精选 2023-10-13 19:03:09 346 阅读

CSS小技巧之绘制心形图案

没有伪元素，没有圆角，没有旋转。使用现代CSS技巧，基于一个元素和几行代码既可创建一个心形图案。

CSS

前端

心形

原创精选 2023-10-13 09:36:24 526 阅读

使用三角函数在CSS中的随机性

本文翻译自 Randomness in CSS using trigonometry，作者：Kacper 略有删改在过去，我已经介绍了CSS中使用模运算的伪随机性的主题，我使用素数创建了一个自动计数器，可以用来为每个对象生成不同的值。因此，我们可以独立地计算每个元素的伪随机值。尽管这个解决方案很强大，但它几乎没有缺点：模函数不是连续的它过于复杂：需要3个变量和@property定义每

CSS

前端

动画

随机数

原创 2023-09-02 23:30:14 173 阅读

纯CSS杂志封面折叠效果

如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯CSS实现这个折叠效果。按图片的效果进行代码还原很多方式都可以实现，以下是本次实现的主要几点：纯CSS实现，不依赖JavaScript 使用单张图片，不需要在PS中切割成多单图片可以通过样式属性中设置CSS变量来配置页面实现过程界

css

前端

动画

交互

原创精选 2023-08-30 09:06:53 417 阅读

一个炫酷的头像悬停效果 2

基于上次翻译的 ??一个炫酷的头像悬停效果收获了不少同学的喜欢，原作者近期进行了优化升级。本文将升级后的核心实现过程进行梳理讲解，如果没看过第一期的推荐先看看第一期的实现过程。升级后的效果如下图所示。 gif动画效果如下：相对于上次的效果主要增加了背景的变化，增加了默认的旋转动画以及背景花瓣的效果。核心实现技术点如下：不需要额外的元素，仅使用<img>标签不使用伪元素使

css

前端

交互

动画

原创 2023-08-21 21:03:13 197 阅读

CSS is、where和has选择器

本文翻译自 How the CSS :is, :where and :has Pseudo-class Selectors Work，作者：Craig Buckler 略有删改 CSS 选择器允许我们按HTML文档中的类型、属性或位置选择元素。本教程介绍了三个新选项:is()、:where()和:has()。选择器通常用于样式表中。以下示例选中所有<p>段落元素并将字体粗细更

CSS

选择器

前端开发

原创精选 2023-07-10 08:17:59 237 阅读

通过构建背景图学习CSS径向渐变

CSS渐变通常用于创建花哨的图案，因此我选择了其中一些仅使用`radial-gradient()`制作的图案。通过构建它们，我们将了解有关这些渐变的一切。

css

html

前端开发

渐变

原创精选 2023-06-30 08:27:43 219 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

南城前端的博客

纯CSS实现有趣emoji切换开关

CSS 终于在 2024 年增加了垂直居中功能

不使用 JS 纯 CSS 获取屏幕宽高

CSS炫酷光晕按钮特效

CSS萤火虫按钮特效

螺旋文字滚动特效源码解析

纯 CSS 实现计时器效果

纯CSS实现丝滑边框线条动画

减少样式计算的范围和复杂度

CSS图像边框：Interop 2023的一个重点领域

炫酷鼠标悬停随机渐变文本动画效果

[译]你应该知道的多个HTML属性

[译]你需要知道的CSS属性isolation

[译]原生CSS嵌套使用

纯CSS实现炫酷背景霓虹灯文字效果

CSS技巧：从高度0过渡到自动高度

纯CSS实现炫酷文本时钟

纯CSS实现炫酷文本阴影效果

纯CSS动态渐变文本特效

纯CSS实现魔法渐变边框卡片

Photoshop Web版本用了哪些CSS技术

使用CSS圆锥渐变创建背景图案

CSS小技巧之单标签loader

Chrome 118 版本中的新功能

CSS小技巧之绘制心形图案

使用三角函数在CSS中的随机性

纯CSS杂志封面折叠效果

一个炫酷的头像悬停效果 2

CSS is、where和has选择器

通过构建背景图学习CSS径向渐变

欢迎