CSS共0篇 第6页
CSS
排序
带你全面了解flex响应式布局
弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：flex布局）...
2年前
理解 CSS 中的 Containing Block
前言 在开始本文之前先来看一个例子，下面一段简单的 html 代码，布局很简单： <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /> ...
2年前vue组件中的样式隔离方式与原理解析
scoped实现样式隔离与穿透 scoped在vue单文件组件中用来标记style标签，让该标签内的css选择器只能选中组件内的元素。就是说让组件内的样式与其它组件隔离，不会影响父组件、子组件的样式。 sco...
2年前
工具 – css 实现密码强度回显小组件
一个文笔一般，想到哪是哪的唯心论前端小白。 前言 接着前面的弹框来的，既然有弹框，那么表单肯定就少不了，这不在弹框里面有个密码强度的回显小demo要做，就花了几分钟想了想，最后选择了用纯...
2年前
2023不得不看CSS知识点(巨详细)
一.高度塌陷 描述 当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。 解决的办法 给父元素添加声明：ove...
2年前
如何使用CSS，给你的图片添加揭露动画效果？
前言 何为揭露动画效果？顾名思义，当触发某种事件后，隐匿在后面的元素会慢慢浮现出来，如下图所示： 你可能会想，我们可以使用其他元素或伪元素，实现该动画效果。 但是我们将只使用<img&g...
2年前
CSS中常用的颜色格式
本文翻译自 Color Formats in CSS ，作者：Joshwcomeau。 略有删改 CSS 中的颜色格式可以采用不同的表示方式，包括常用的十六进制、RGB、RGBA、HSL 和 HSLA 等格式。十六进制是最常用的格式，使...
2年前
CSS is、where和has选择器
本文翻译自 How the CSS :is, :where and :has Pseudo-class Selectors Work，作者：Craig Buckler 略有删改 CSS 选择器允许我们按HTML文档中的类型、属性或位置选择元素。本教程介绍了三个新选...
2年前
使用react-router 6.14.x 和 framer-motion 实现路由过场动画
Framer-motion这个库，是我体验过的最好用的React生态下的交互动效库, 它不仅可以实现很多交互动画或者元素动画，而且性能很好，重点是它还可以结合react-router（v5/v6）实现路由过场动画效果...
2年前
媒体查询，响应式设计？帮帮我！
原文地址： engineering.kablamo.com.au/posts/2023/… 什么是媒体查询？ 媒体查询是一种 CSS 语言特性，它允许作者根据设备或窗口的特性有条件地应用 CSS 规则来查看应用程序。最常见的情况是...
2年前
【CSS】使用新版 CSS sin() 和 cos() 三角函数创建简约时钟和图片库
CSS三角函数来了！好吧，如果您使用的是最新版本的 Firefox 和 Safari，那就是这样。CSS 中拥有这种数学能力开启了一大堆可能性。在本教程中，我们应该好好来感受一下几个新函数：sin()和cos()...
2年前
现代 CSS 你知道多少
写在前面 现代 CSS （Modern CSS）应该是 2023 年前端圈热门话题之一，在最近的 CSS Day 活动上也有这个话题。另外在社区中也不乏现代 CSS 的讨论以及如何使用现代 CSS 特性来编写和组织 CSS 代...
2年前
CSS 实现 10 种现代布局
01. 超级居中：place-items: center 对于第一个“单行”布局，让我们解决所有 CSS 领域中最大的谜团：居中。我想让您知道，使用 place-items: center 会让此操作比您想象的容易。 首先指定 grid...
2年前手把手教你实现一个电视噪音效果~
前言 大家都经历过在屏幕上出现卡顿的情况吧，它会出现很多小像素方块，这种效果被称作为电视噪音效果。因此这次带来的是一款电视噪音特效，模拟电视噪音。 效果一览 整体实现 还是老样子，我们...
2年前CSS3的过度
CSS3过渡是一种用于在元素状态变化时平滑过渡的效果。通过CSS3过渡，你可以定义元素在状态改变时的动画效果，如颜色、大小、位置等的平滑过渡。 属性 transition-property： 指定要过渡的CSS属...
2年前
Vue 右键菜单的秘密：自适应位置的实现方法！
下图这个情景，你是否也遇到过？ 当你右键点击网页上的某个元素时，弹出的菜单被屏幕边缘遮挡了，导致你无法看清或选择菜单项？ 我是渡一前端子辰老师，今天我们就来探讨如何用简单而有效的方法...
2年前Progress 圆形进度条 实现
效果图 实现过程分析 简要说明 本文主要以 TypeScript + React 为例进行讲解, 但相关知识和这个关系不大. 不会也不影响阅读 dome 中使用到了 sass, 但用法相对简单, 不影响理解 HTML DOM 元素说...
2年前
CSS系列background渐变动画
继上一篇background学习后，现在来继续深入background的动画相关的实践例子。 有很多属性支持动画，例如color, height, width。他们在MDN中可以查阅到动画的支持情况。 1. background-image背景...
2年前
CSS创作个人主页介绍卡片，展示独特魅力
前面 在现代网页设计中，个人主页是一个展示个人信息、技能、事件等的重要载体。为了吸引访客的注意力并提供良好的用户体验，设计师通常会运用各种技巧和效果来增加页面的吸引力。本文将介绍如...
2年前
【CSS+JS】5分钟实现超nice的动态翻书效果
前言 本文将带大家来实现一个非常有趣的案例——打开书本效果。我们平常冲浪时是不是看过一些学校高级的录取通知书，翻开通知书就能看见里面的内容，呈现出逼真的3D效果！ 先来看效果图： 思路...
2年前