css样式 - 随笔分类 - 蓦然JL

摘要：

当我第一次看到这动画效果时，还以为是通过 GIF、CSS3 或者 Canvas 制作的。结果出乎意料，居然是用 SVG 实现的！也许你对 SVG 动画还不太熟悉，那就让我们一起开启这场奇妙的旅程吧！什么是 SVG 动画？ SVG（Scalable Vector Graphics）是一种用于描述二阅读全文

posted @ 2025-09-03 15:19 蓦然JL 阅读(130) 评论(0) 推荐(0)

H5首页白屏时间太久问题优化

摘要：

在移动端H5项目中，首页白屏时间过长会严重影响用户体验，导致用户流失和跳出率上升。本文将从白屏时间的定义、常见原因、优化方案等方面，详细讲解如何有效缩短H5首页的白屏时间。一、白屏时间的定义白屏时间通常指的是用户从点击页面到看到首屏内容所经历的时间，通常包括以下几个关键阶段： DNS解析：浏览器阅读全文

posted @ 2025-06-03 09:00 蓦然JL 阅读(143) 评论(0) 推荐(0)

CSS 深度选择器：深入理解 `::v-deep`

摘要：

1. 深度选择器的背景在 Vue 组件的 scoped 样式中，CSS 选择器默认仅作用于当前组件的 DOM 元素，无法直接影响子组件的内容。为了提供一种方法可以“深入”子组件的结构并应用样式，Vue 引入了深度选择器。 2. 何为深度选择器？深度选择器用于在 scoped 样式中穿透子组件的样阅读全文

posted @ 2025-05-20 09:53 蓦然JL 阅读(1156) 评论(0) 推荐(0)

浏览器滚动能力完全解析：scroll, scrollTo, scrollBy, scrollIntoView

摘要：

先有问题再有答案滚动的前提是什么浏览器提供了哪些滚动api scroll, scrollTo, scrollBy, scrollIntoView 有什么区别？这些api具体如何使用这些api在使用上有什么问题如何实现一个smooth效果的scrollTo api？ offsetTop、of 阅读全文

posted @ 2025-04-08 10:20 蓦然JL 阅读(405) 评论(2) 推荐(0)

CSS 怎么实现两个 div 一个固定宽另一个填充剩余空间？

摘要：

当年这可能是一个典型的CSS面试题：“两列布局”。很多年前（大约是10年前吧），有过这样的一个面试题：两列布局，左侧列宽度是20%，右侧列是80%，两列之间的间距是20px，CSS怎样实现这样的一个布局，而且不会出现滚动条！对于题主这个问题，早在当年可能会较为蛋疼一点，或许很多开发者会采用 Ja 阅读全文

posted @ 2024-12-30 11:13 蓦然JL 阅读(141) 评论(0) 推荐(1)

裁剪的3种方式，CSS 如何隐藏移动端的滚动条？

摘要：

在移动端开发中，经常会碰到需要横向滚动的场景，例如这样的但很多时候是不需要展示这个滚动条的，也就是这样的效果，如下你可能想到直接设置滚动条样式就可以了，就像这样 ::-webkit-scrollbar { display: none; } 目前来看好像没什么问题，但在某些版本的 iOS 上却无效阅读全文

posted @ 2024-06-05 15:51 蓦然JL 阅读(428) 评论(0) 推荐(0)

CSS mask 与切图艺术

摘要：

一、“切图”的局限性传统的“切图”简单暴力，但往往缺少适应性。适应性一般有两种，一是尺寸自适应，二是颜色可以自定义。举个例子，有这样一个优惠券样式关于这类样式实现技巧，之前在这篇文章中有详细介绍： CSS 实现优惠券的技巧不过这里略微不一样的地方是，两个凹陷处都是平滑处理的单纯实现内凹圆阅读全文

posted @ 2024-05-06 09:51 蓦然JL 阅读(239) 评论(0) 推荐(0)

使用 CSS columns 布局来实现自动分组布局

摘要：

最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下图中序号是 dom 序列，所以其实这这样的一个顺序很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组阅读全文

posted @ 2024-05-06 09:51 蓦然JL 阅读(228) 评论(0) 推荐(0)

CSS 滚动驱动动画终于正式支持了

摘要：

在最新的Chrome 115中，令人无比期待的CSS 滚动驱动动画(CSS scroll-driven animations)终于正式支持了\~有了它，几乎以前任何需要JS监听滚动的交互都可以纯 CSS 实现了，就是这么强大，一起了解一下吧温馨提示：文章略长，建议收藏后反复查阅一、快速入门 CS 阅读全文

posted @ 2024-04-18 09:10 蓦然JL 阅读(384) 评论(0) 推荐(0)

CSS 如何实现羽化效果

摘要：

羽化是photoshop术语，羽化原理是令选区内外衔接部分虚化，起到渐变的作用从而达到自然衔接的效果，是ps及其其它版本中的处理图片的重要工具。一、羽化的原理羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩（mask），也就是需要一种半透明的渐变。关于遮罩，这里简单介绍阅读全文

posted @ 2024-04-01 16:04 蓦然JL 阅读(914) 评论(0) 推荐(0)

CSS3制作图片样式

摘要：

问题：如果在img上直接使用CSS3的border-radius和box-shadow应用在图片，浏览器并不会完全显示。前面在《jQuery和CSS3给图片制作圆角》中说过其解决方法，就是把图片作为背景图片，这样我们就可以应用任何样式来修饰图片，而且此时浏览器也会完美的呈现出来。解决方法：要让阅读全文

posted @ 2024-04-01 16:03 蓦然JL 阅读(121) 评论(0) 推荐(0)

变形元素旋转css阴影

摘要：

一、 css3 transform 变换 translate(x,y) 设置盒子的位移 scale（x,y)设置盒子缩放 roate（dog) 设置盒子的旋转 skew（x-angle,y-angle）设置盒子的斜切 perspective 设置透视距离 transform-styoleflat 阅读全文

posted @ 2024-03-25 11:14 蓦然JL 阅读(41) 评论(0) 推荐(0)

纯CSS 毛玻璃效果

摘要：

在一个复杂的背景上添加文字，文字能清晰展示，并尽可能的保留原背景的话，使用毛玻璃的效果去处理是非常合适的。一、背景图毛玻璃在 PhotoShop 中，毛玻璃主要使用高斯模糊和羽化。说白了就是模糊。在 CSS 中，想要实现模糊效果，可以使用滤镜。背景通常设置成黑色、灰色或者白色，然后阅读全文

posted @ 2024-03-25 11:10 蓦然JL 阅读(756) 评论(0) 推荐(0)

你不知道的CSS骚操作

摘要：

1. 禁用鼠标事件、移动端禁止图片长按保存功能（PC端禁止鼠标点击事件，移动端禁止触摸事件还有长按事件） .no-events { pointer-events: none } 2.移动端禁止用户长按文字选择功能 .unselect { -webkit-touch-callout:none; -we 阅读全文

posted @ 2023-11-10 14:16 蓦然JL 阅读(71) 评论(0) 推荐(0)

怎么用 CSS 美化被选中的文字？

摘要：

要使用 CSS 美化被选中的文字，可以使用 ::selection 伪元素选择器来设置样式。该选择器会选中用户在页面上所选中的文本，因此您可以使用它来应用样式来改变文本的外观。例如，要将被选中的文本的背景色设置为黄色，可以使用以下 CSS 代码： ::selection { background- 阅读全文

posted @ 2023-11-01 13:16 蓦然JL 阅读(143) 评论(0) 推荐(0)

26个CSS超实用技巧

摘要：

1.文字溢出显示省略号单行文字：一定要设置宽度 p{ • width:200px; • overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } 多行文字溢出显示省略号p{display:-webkit-bo 阅读全文

posted @ 2023-10-16 15:20 蓦然JL 阅读(65) 评论(0) 推荐(0)

CSS 如何实现比普通阴影更加立体的阴影效果？

摘要：

在实现更加立体的阴影效果前，需要了解一下 CSS 阴影基础。 CSS 阴影基础 CSS 中，明面上可以实现阴影的有三个属性： box-shadow - 盒阴影 text-shadow - 文字阴影 filter: drop-shaodw() - 滤镜内的阴影关于它们的基础语法和使用就不过多描述，这阅读全文

posted @ 2023-09-01 09:45 蓦然JL 阅读(15) 评论(0) 推荐(0)

18个工作中常用的CSS样式

摘要：

01、页面动画出现闪烁在Chrome and Safari浏览器中，在使用transforms或者animations这类过渡属性和动画的时候可能会出现页面的闪烁情况那此时我们就可以使用一下代码来尝试回避。 .cube { -webkit-backface-visibility: hidden; 阅读全文

posted @ 2023-08-05 13:57 蓦然JL 阅读(97) 评论(0) 推荐(0)

CSS 如何根据背景色自动切换黑白文字？

摘要：

在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：一、CSS 滤镜实现使用滤镜对文字单独处理，所以需要额外一层标签。然后容器和文字用同一种颜色表示，目的是让文字颜色和背阅读全文

posted @ 2023-06-16 15:29 蓦然JL 阅读(867) 评论(0) 推荐(0)

CSS实现渐变色边框

摘要：

渐变色边框如果我们前端最亲爱的UI设计师，让我们给盒子绘制一个渐变色的边框，而且盒子的宽高还需要随着内容变化而变化，那我们就不能通过切图来解决问题，所以我们可以这么说：但是我相信优秀的你肯定不会说做不了，所以我下面列举三种方案来帮你排忧解难： 1、 border-image（看需求）该属性与b 阅读全文

posted @ 2023-02-07 16:52 蓦然JL 阅读(1599) 评论(0) 推荐(2)

蓦然JL

蓦然回首，那人就在灯火阑珊处（供自己学习参考汇总）

随笔分类 - css样式

公告

蓦然JL

蓦然回首，那人就在灯火阑珊处 （供自己学习参考汇总）

随笔分类 - css样式

公告

蓦然回首，那人就在灯火阑珊处（供自己学习参考汇总）