CSS共0篇 第8页
CSS
排序
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年前
几个简单使用的动画小技巧，学会了快去打造你自己的个人网站吧
平时工作中，大部分的前端页面仔可能都是在苦苦处理curd这种简单且重复无意义的劳动之中，久而久之是否都忘记当初自己刚入行时的雄心壮志:开发出一个狂拽炫酷叼霸天的网站，特效拉满、什么3D、...
2年前
基于vite2+react+typescript前端开发工程化（二）
一、回顾简述 上一篇文章，主要讲述了前端工程初始化、目录结构、以及前端规范体系： 代码格式规范 代码质量规范 代码提交规范 版本管理规范 标准化和统一前端团队的代码风格和代码验证，可以大...
2年前
如何理解 CSS step 函数中的 jump-* 关键词？
欢迎关注我的公众号：前端侦探 之前在这篇文章中：CSS 实现 Ant Design官网Logo彩蛋效果实现了一个鼠标 hover 效果，如下 原理其实很简单，就是一个 CSS 动画，使用的是steps阶梯函数，不断改变...
2年前
深入了解CSS颜色混合函数color-mix
欢迎关注我的公众号：前端侦探 今天来介绍一下 Chrome 111+正式推出的 CSS颜色混合函数：color-mix()。 所谓颜色混合，顾名思义，就是将两种颜色按照一定的比例混合起来，和调色板比较像。到目...
2年前