纯CSS实现海浪文字效果
如图所示，这是一个很炫酷的文字波动效果，文字呈现出一个海浪波动的效果，这样的动画效果可以显著加强文案本身的含义。本文将解析如何使用纯CSS实现这个特效，基于这个动图可以分析出实现这个效果的主要功能要点： 整体呈现出3D文案效果 文案呈现波动状态动画 文案有渐变颜色的变化 文案在变化过程中有倾斜分层的效果 1\. 基础样式 首先我们从布局和基础样式开始。 通过上面的图片可以看出动画中的内容是由多个层叠在一起的效果，所以这里我们创建多个标签...
还在用 swiper.js 吗？CSS实现带指示器的swiper
几乎每个前端开发都应该用过这个滑动组件库吧？这就是大名鼎鼎的 没想到已经出到 11 个大版本了 https://www.swiper.com.cn/ 当然我也不例外，确实非常全面，也非常强大。 不过很多时候，我们可能只用到了它的 不到的功能，显然是不划算的，也会有性能方面的顾虑。 随着 地不断发展，现在纯 也几乎能够实现这样一个 了，实现更加简单，更加轻量，性能也更好，完全足够日常使用，最近在项目中也碰到了一个 的需求，刚好练一下手，一...
纯css实现无限循环滚动logo墙
一、需求 在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。 不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左往右和从右往左滚动； 4、滚动速度需要可配置。 简单动画，我们先尝试只使用css实现。 二、实现 1、marquee标签 说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可以控制方向和速度。...
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
伪类和伪元素是什么什么是伪类
什么是伪类 (pseudo classes)？ 伪类可以让我们根据元素的状态变化使用 CSS。例如，当我们想要设置某元素在被指标指到时的样式，我们可以使用 伪类来改变样式。 介绍 4 个常见的伪类 (pseudo classes) 用法 当用户的鼠标或触控板等设备放在元素上时，我们可以使用 更改元素的样式。 、 这两个伪类都是用在含有 href 属性的 元素上。 可以调整使用者还未浏览过的链接样式，而 则可以改变使用者已浏览过的链接样式...
根据文本是否溢出来控制popover的显示
前言：之前遇到一个需求：单行文本溢出隐藏hover展示全部，当时写过一篇文章，是创建一个临时变量，然后设置样式，通过比较文本正常的宽度和布局宽度来判断是否溢出；现在遇到另一个需求，多行文本溢出隐藏hover展示全部信息；回想起当初的写法，只能说是年轻时“不懂事”啊，现在这两种场景重新进行梳理总结 查看年轻时写的代码 效果图如下： 1. 单行文本溢出隐藏hover展示全部 2. 多行文本溢出隐藏hover展示全部 我们就以title属性来...
link与@import区别_link和import的区别
区别： 1. link属于html标签。@import在css中使用表示导入外部样式表； 2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载; 3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题; 4. link方式的样式的权重 高于@import的权重； 5. link 支持使用javascript改变样式 （ ），后者不可 使用场景：
手把手教你实现一个摇摆的信息牌
HTML 部分 首先我们看到 部分。相关代码如下。 在这里声明了一些元素，比如 和 ，也包含一个 元素，表示一个独立的内容单元，通常用于包含独立的流内容（比如图片、图表、照片、代码等）。在这个示例中，它代表了一个咖啡店的招牌。这些元素形成了后面整个效果的基础骨架，有了这些，我们后面就可以为它们添加 样式。 这些元素一起形成了整个咖啡店招牌的结构，通过 样式和动画，创建了一个炫目而生动的效果。 CSS 部分 接下来就是 部分了。相关代码如...
CSS萤火虫按钮特效
如图所示，这是一个很炫酷的按钮悬浮特效，鼠标悬停时，按钮呈现发光的效果，周边还出现类型萤火虫的效果。本文将解析如何实现这个按钮特效，基于这个动图可以分析出需要实现的要点： 有一个跟随鼠标移动的圆点 按钮悬停时有高亮发光的效果 悬停时按钮周边的萤火中效果 实现过程 跟随鼠标移动的圆点 这个部分需要基于JS实现，但不是最主要的实现代码 如果单纯做一个跟随鼠标移动的点很简单，只需要监听鼠标事件获取坐标实时更新到需要移动的元素上即可。但是仔细看...