当前位置: 首页 > news >正文

CSS Transition入门指南


CSS Transition 完全指南

目录

  1. Transition 的作用
  2. 核心属性
  3. 代码示例
  4. 使用场景
  5. 性能优化
  6. 常见问题
  7. 思维导图

1. Transition 的作用

CSS Transition 用于在 属性值变化时 创建平滑的过渡效果。例如:

  • 鼠标悬停时按钮放大
  • 元素颜色渐变切换
  • 位置移动的缓动效果

2. 核心属性

属性描述默认值示例值
transition-property指定要过渡的属性allwidth, opacity
transition-duration过渡持续时间0s0.3s, 500ms
transition-timing-function速度曲线(缓动函数)easelinear, ease-in-out
transition-delay过渡开始前的延迟0s0.2s
简写属性transition: property duration timing-function delay;-transition: width 0.3s ease-in-out 0.1s;

3. 代码示例

基础示例:悬停放大按钮

<button class="btn">Hover Me</button><style>
.btn {padding: 10px 20px;background: #3498db;color: white;border: none;transition: transform 0.3s ease;
}.btn:hover {transform: scale(1.1); /* 触发过渡 */
}
</style>

多属性过渡

.box {width: 100px;height: 100px;background: #e74c3c;transition: width 0.5s ease-in-out,background 0.3s linear;
}.box:hover {width: 200px;background: #2ecc71;
}

延迟触发

.element {opacity: 0.5;transition: opacity 0.4s ease 1s; /* 1秒后开始过渡 */
}.element:hover {opacity: 1;
}

4. 使用场景

场景示例
悬停效果按钮放大、颜色渐变
表单交互输入框聚焦时边框高亮
加载状态进度条平滑填充
动态显示/隐藏淡入淡出(结合 opacityvisibility

5. 性能优化

  • 优先使用 GPU 加速属性
    /* 高性能 */
    transform: translateX(100px);
    opacity: 0.5;/* 低性能(触发重排) */
    margin-left: 100px;
    width: 200px;
    
  • 避免过渡过多属性:同时过渡多个属性可能导致卡顿。
  • 使用 will-change:提示浏览器提前优化:
    .element {will-change: transform;
    }
    

6. 常见问题

Q1:过渡不生效?

  • 检查是否设置了 transition-duration
  • 确保属性值变化(如通过 :hover 或 JavaScript 触发)。

Q2:如何实现阶跃动画?

使用 steps() 缓动函数:

transition-timing-function: steps(4, jump-end);

Q3:如何禁用过渡?

.element {transition: none;
}

7. 思维导图结构

CSS Transition
├── 作用
│   └── 平滑属性变化
├── 核心属性
│   ├── transition-property
│   ├── transition-duration
│   ├── transition-timing-function
│   ├── transition-delay
│   └── 简写语法
├── 缓动函数(easing)
│   ├── linear
│   ├── ease-in
│   ├── ease-out
│   └── cubic-bezier()
├── 使用场景
│   ├── 悬停效果
│   ├── 表单交互
│   └── 动态显示/隐藏
└── 性能优化├── GPU 加速属性├── 避免重排└── will-change

扩展练习

  1. 实现一个卡片悬停时阴影加深并上移的效果。
  2. 制作一个菜单栏,鼠标悬停时子菜单从顶部滑出。
  3. 结合 JavaScript,在点击按钮时通过添加类名触发过渡。

资源推荐

  • MDN Transition Docs
  • CSS Transition Generator
  • Cubic Bezier 缓动函数工具

相关文章:

CSS Transition入门指南

CSS Transition 完全指南 目录 Transition 的作用核心属性代码示例使用场景性能优化常见问题思维导图 1. Transition 的作用 CSS Transition 用于在 属性值变化时 创建平滑的过渡效果。例如&#xff1a; 鼠标悬停时按钮放大元素颜色渐变切换位置移动的缓动效果 2. 核心属性…...

Nginx 核心功能

目录 一、基于授权的访问控制 &#xff08;1&#xff09;使用htpasswd 生成用户认证文件 &#xff08;2&#xff09;修改密码文件权限为400&#xff0c;将所有者改为nginx &#xff0c;设置 Nginx 的运行用户能够读取 &#xff08;3&#xff09;修改主配置文件 nginx.conf&…...

排序版研究方向

姓 名研究方向电子邮箱办公电话办公地点曹培根代数cao2024ustc.edu.cn 新楼412陈洪佳代数hjchenustc.edu.cn0551-636076931529陈小伍代数xwchenmail.ustc.edu.cn0551-636062351321梁永祺代数yqliangustc.edu.cn0551-636006171613欧阳毅代数yiouyangustc.edu.cn0551-63600337…...

AI国学智慧语录视频,条条视频10W+播放量

家人们&#xff01;图书类带货玩法真的非常多&#xff0c;之前也分享过蛮多&#xff0c;例如情感语录、育儿教育、爆款图书金句类、AI历史人物解说类等等。 本期继续来分享一个对于普通人来说&#xff0c;上手相当简单&#xff0c;容易起号&#xff0c;可作为长线深耕的AI带货…...

RN 获取视频封面,获取视频第一帧

严格的说&#xff0c;没有解决这个问题&#xff0c;实际上是绕过了这个问题&#xff0c;严格的说获取的也不是第一帧。 RN的video 视频应用&#xff0c;大多是这样的 1、安装 yarn add react-native-video 2、导入 import Video from react-native-video; 3、使用 …...

缓存分片哈希 vs 一致性哈希:优缺点、区别对比及适用场景(图示版)

&#x1f4dc; 引言 在分布式缓存系统中&#xff0c;数据分布策略是设计的关键之一。缓存分片哈希和一致性哈希是两种常见的数据分布算法&#xff0c;它们各有优缺点和适用场景。本文将通过图示对比表格&#xff0c;深入解析这两种算法的核心原理、优缺点及适用场景。 &#x…...

iOS - 音频: Core Audio - 播放

环境 iOS 18 Xcode 16.3 swift-driver version: 1.120.5 Apple Swift version 6.1 (swiftlang-6.1.0.110.21 clang-1700.0.13.3) Target: x86_64-apple-macosx15.0 Core Audio 的架构 声音数据的描述 sample: 一个声道采样的值,采样率定义了每秒从连续信号中提取并组成离散信号…...

Nerfstudio 环境配置与自有数据集(图片和视频)测试全方位全流程实战【2025最新版!!】

一、引言 神经辐射场(Neural Radiance Fields&#xff0c;简称NeRF)是近年来计算机视觉和图形学领域的一项革命性技术&#xff0c;它能够从2D图像中学习复杂的3D场景表示。然而&#xff0c;NeRF技术的实现和应用门槛较高&#xff0c;需要较为专业的计算机视觉和深度学习知识。…...

【Java学习】动态代理有哪些形式?

Java动态代理的两种主要形式 动态代理在Java中有两种主要的实现方式&#xff0c;它们各有特点和使用场景&#xff1a; 1. JDK动态代理 (基于接口) 特点&#xff1a; Java标准库自带的功能&#xff08;java.lang.reflect.Proxy&#xff09;只能代理接口&#xff0c;不能代理…...

Android Studio 中实现方法和参数显示一行

Android Studio 中实现方法和参数显示一行&#xff0c;可通过以下步骤配置&#xff1a; 一、基础格式化设置 ‌快捷键格式化‌ 选中代码后使用 Ctrl Alt L&#xff08;Windows/Linux&#xff09;或 Cmd Option L&#xff08;Mac&#xff09;进行快速格式化27。 ‌菜单操作…...

SQLyog中DELIMITER执行存储过程时出现的前置缩进问题

在SQLyog中执行存储过程时出现的前置缩进问题&#xff0c;实际上反映了SQLyog对SQL语句解析的一个特殊行为。以下是详细解释和解决方案&#xff1a; 问题根源 SQLyog的语句分隔逻辑&#xff1a; SQLyog默认会根据分号(;)和换行自动分隔SQL语句 当代码有缩进时&#xff0c;SQLy…...

基于Spring Boot 3.0、ShardingSphere、PostgreSQL或达梦数据库的分库分表

要实现基于Spring Boot 3.0、ShardingSphere、PostgreSQL或达梦数据库的分库分表&#xff0c;首先需要对ShardingSphere进行一些基本配置。你提到的溯源码、批次号等数据需要考虑到跨年数据的存储&#xff0c;因此要设计一个能够动态扩展的分表策略 添加ShardingSphere依赖 在…...

vscode chrome调试怎么在所有浏览器都好使

chrome调试时只能在打开的浏览器里进行调试&#xff0c;其它打开的chrome浏览器就不能调试了&#xff0c;怎么解决。 右键点击 Chrome 的快捷方式图标&#xff0c;选择属性 在目标一栏&#xff0c;最后加上--remote-debugging-port9222 注意要用空格隔开 lanch.json 文件配置 …...

20250429在Ubuntu 20.04.6下安装VMware Workstation16

20250429在Ubuntu 20.04.6下安装VMware Workstation16 2025/4/29 20:16 缘起&#xff1a;1、在ubuntu14.04下git clone异常该如何处理呢&#xff1f; 2、请问 现在 编译NanoPi NEO的FriendlyCore系统使用ubuntu哪一个版本比较好&#xff1f; ubuntu14.04 编译异常/下载不了&am…...

Java高频面试之并发编程-10

hello啊&#xff0c;各位观众姥爷们&#xff01;&#xff01;&#xff01;本baby今天来报道了&#xff01;哈哈哈哈哈嗝&#x1f436; 面试官&#xff1a;ThreadLocalMap 怎么解决 Hash 冲突的&#xff1f; ThreadLocalMap 是 ThreadLocal 的核心实现&#xff0c;它采用 开放…...

【Tauri2】035——sql和sqlx

前言 这篇就来看看插件sql SQL | Taurihttps://tauri.app/plugin/sql/ 正文 准备 添加依赖 tauri-plugin-sql {version "2.2.0",features ["sqlite"]} features可以是mysql、sqlite、postsql 进去features看看 sqlite ["sqlx/sqlite&quo…...

C++/SDL 进阶游戏开发 —— 双人塔防(代号:村庄保卫战 16)

&#x1f381;个人主页&#xff1a;工藤新一 &#x1f50d;系列专栏&#xff1a;C面向对象&#xff08;类和对象篇&#xff09; &#x1f31f;心中的天空之城&#xff0c;终会照亮我前方的路 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 文章目录 […...

VScode与远端服务器SSH链接

这里写自定义目录标题 简介步骤 简介 这里是使用密钥文件链接 步骤 首先在windows CMD中运行 ssh-keygen -t rsa&#xff0c;生成本机的公钥和私钥 这里id rsa.pub就是公钥&#xff0c;在服务器端使用&#xff0c;id rsa是私钥在用户端使用;通常目录在C:/Users/Your name/…...

数据结构入门:详解顺序表的实现与操作

目录 1.线性表 2.顺序表 2.1概念与结构 2.2分类 2.2.1静态顺序表 2.2.2动态顺序表 3.动态顺序表的实现 3.1.SeqList.h 3.2.SeqList.c 3.2.1初始化 3.2.2销毁 3.2.3打印 3.2.4顺序表扩容 3.2.5尾部插入及尾部删除 3.2.6头部插入及头部删除 3.2.7特定位置插入…...

Reactor框架介绍

Reactor(反应器模式)是一种事件驱动的设计模式,广泛用于高性能网络编程和异步I/O处理。它的核心思想是将事件分发与业务逻辑解耦,通过统一的机制处理多路I/O事件。 这个在android蓝牙中大量使用,如果这里不懂,那么很难看懂底层的逻辑,所以我们在这片文章中做一个介绍 …...

Nacos 3.0 正式发布:MCP Registry、安全零信任、链接更多生态

Nacos 3.0 正式版本发布啦&#xff01;升级 MCP Registry&#xff0c;围绕着 MCP 服务管理&#xff0c;MCP 多种类型注册&#xff0c;包含 MCP Server 注册、编排、动态调试和管理&#xff0c;并且提供 Nacos-MCP-Router 可以进行 MCP 动态发现&#xff0c;可以自动安装、代理 …...

前端安全中的XSS(跨站脚本攻击)

XSS 类型 存储型 XSS 特征&#xff1a;恶意脚本存储在服务器&#xff08;如数据库&#xff09;&#xff0c;用户访问受感染页面时触发。场景&#xff1a;用户评论、论坛帖子等持久化内容。影响范围&#xff1a;所有访问该页面的用户。 反射型 XSS 特征&#xff1a;恶意脚本通过…...

go单向链表

需求 实现单向链表的节点顺序添加、顺序遍历。 实现 package mainimport ("fmt" )type zodiac_sign struct {number intdizhi stringanimal stringyear intnext *zodiac_sign }// 添加 // func add_node_by_order(previous_node zodiac_sign, current_node z…...

Python小程序:上班该做点摸鱼的事情

系统提醒 上班会忘记一些自己的事&#xff0c;所以你需要在上班的的时候突然给你弹窗&#xff0c;你就知道要做啥了 源码 # -*- coding:utf-8 -*- """ 作者:杨桃清 日期: 2025年04日29 21:51:24 """ import datetime import time import thre…...

uni-app中使用RenderJs 使用原生js

RenderJs运行的层叫【视图层】&#xff0c;Uniapp原生Script叫【逻辑层】&#xff0c;逻辑层要调用视图层需要使用一个叫【watcher】&#xff0c;具体怎么调用呢 为了实现这两层之间的通信&#xff0c;uniapp提供了一些特定的机制。以下是对这些通信机制的详细解释&#xff0c…...

51c自动驾驶~合集37

我自己的原文哦~ https://blog.51cto.com/whaosoft/13878933 #DETR->DETR3D->Sparse4D 走向长时序稀疏3D目标检测 一、DETR 图1 DETR架构 DETR是第一篇将Transformer应用到目标检测方向的算法。DETR是一个经典的Encoder-Decoder结构的算法&#xff0c;它的骨干网…...

uniapp 小程序 安卓苹果 短视频解决方案

需求 要做类似抖音小程序的功能 思路 uniapp 使用swiper滑块 实现滑动 使用video播放视频 遇到的问题 1 video组件在小程序可以使用 uni.createVideoContext api控制 2 但是在app端会有层级问题&#xff08;因为使用的原生组件具体看官方文档&#xff09;导致无法正常滑动…...

LeetCode58_最后一个单词的长度

LeetCode58_最后一个单词的长度 标签&#xff1a;#字符串Ⅰ. 题目Ⅱ. 示例 0. 个人方法 标签&#xff1a;#字符串 Ⅰ. 题目 给你一个字符串 s&#xff0c;由若干单词组成&#xff0c;单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、…...

深入理解Spring AI框架的核心概念

深入理解Spring AI框架的核心概念 前言 在当今人工智能飞速发展的时代&#xff0c;将AI技术集成到应用程序中已成为众多开发者关注的焦点。Spring AI框架为Java开发者提供了便捷的途径来实现这一目标。理解其核心概念对于充分发挥框架的潜力至关重要。本文将详细探讨Spring A…...

技术驱动与模式创新:开源AI大模型与S2B2C商城重构零售生态

摘要&#xff1a;在移动互联网与人工智能技术深度融合的背景下&#xff0c;零售行业正经历从“人找货”到“货找人”的范式转移。本文以开源AI大模型、AI智能名片、S2B2C商城小程序源码为核心技术要素&#xff0c;结合无人便利店、盒马鲜生、王府井二次元业态等商业实践&#x…...

精益数据分析(30/126):电商商业模式的深度剖析与关键指标解读

精益数据分析&#xff08;30/126&#xff09;&#xff1a;电商商业模式的深度剖析与关键指标解读 在创业与数据分析的漫漫征途中&#xff0c;我们都在不断探寻如何更好地理解和运用商业数据&#xff0c;以实现业务的蓬勃发展。今天&#xff0c;我依旧带着和大家共同进步的初心…...

玩玩OCR

一、Tesseract: 1.下载windows版&#xff1a; tesseract 2. 安装并记下路径&#xff0c;等会要填 3.保存.py文件 import pytesseract from PIL import Image def ocr_local_image(image_path):try:pytesseract.pytesseract.tesseract_cmd rD:\Programs\Tesseract-OCR\tesse…...

gradle 下载的tencent的镜像

distributionUrlhttps://mirrors.cloud.tencent.com/gradle/gradle-5.4.1-all.zip distributionUrlhttps://mirrors.aliyun.com/gradle/distributions/v5.4.1/gradle-5.4.1-all.zip 参考&#xff1a; gradle 镜像地址,解决 AS 下载缓慢或者下不下来的问题-CSDN博客...

【含文档+PPT+源码】基于微信小程序的乡村振兴民宿管理系统

项目介绍 本课程演示的是一款基于微信小程序的乡村振兴民宿管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 3.该…...

【Redis——数据类型和内部编码和Redis使用单线程模型的分析】

文章目录 Redis的数据类型和内部编码单线程模型的工作过程Redis虽然是一个单线程模型&#xff0c;为啥效率那么高&#xff0c;速度快呢&#xff1f; 总而言之&#xff0c;Redis提供的哈希表容器并不一定真的是真的哈希表&#xff0c;而是在特点的场景下&#xff0c;用别的容器去…...

leetcode day37 474

474 一和零 给你一个二进制字符串数组 strs 和两个整数 m 和 n 。 请你找出并返回 strs 的最大子集的长度&#xff0c;该子集中 最多 有 m 个 0 和 n 个 1 。 如果 x 的所有元素也是 y 的元素&#xff0c;集合 x 是集合 y 的 子集 。 示例 1&#xff1a; 输入&#xff1a;s…...

【计算机视觉】目标检测:深度解析YOLOv9:下一代实时目标检测架构的创新与实战

深度解析YOLOv9&#xff1a;下一代实时目标检测架构的创新与实战 架构演进与技术创新YOLOv9的设计哲学核心创新解析1. 可编程梯度信息&#xff08;PGI&#xff09;2. 广义高效层聚合网络&#xff08;GELAN&#xff09;3. 轻量级设计 环境配置与快速开始硬件需求建议详细安装步骤…...

Android Studio Profiler

1.我们想要查看自己方法的调用链&#xff0c;或者分析方法耗时的情况&#xff0c;可以选择Android Studio的Profiler&#xff0c;比较方便快捷。如下&#xff1a; 2.基本的面板参数讲解&#xff1a; 3.可以通过搜索&#xff0c;查看对应的方法&#xff0c;以及方法的调用链…...

Android Studio for Platform(ASFP)真机调试

连接设备 由于ubuntu连接adb设备每次都需要配置usb权限&#xff0c;很麻烦。并且每次换设备还要重新配置&#xff0c;我多数设备都是用wifi的adb方式连接。 开发板显示 连接显示器配合usb鼠标或者遥控器操作&#xff08;因为开发板默认开启了adb&#xff0c;我这里是使用有线…...

如何个人HA服务器地址和长期密钥

下面分两步说明如何获取你的 Home Assistant 服务器地址以及创建“长期访问令牌”&#xff08;Long-Lived Access Token&#xff09;&#xff0c;并给出一个简单的 Python 调用示例。 一、获取 Home Assistant 服务器地址 默认域名/端口 如果你在本机或局域网内安装并使用默认设…...

生物化学笔记:神经生物学概论04 视觉通路简介视网膜视网膜神经细胞大小神经节细胞(视错觉)

视觉通路简介 神经节细胞的胞体构成一明确的解剖层次&#xff0c;其外邻神经纤维层&#xff0c;内接内丛状层&#xff0c;该层在鼻侧厚约10&#xff5e;20μm&#xff0c;最厚在黄斑区约60&#xff5e;80μm。 全部细胞数约为120万个(1000000左右)。 每个细胞有一轴突&#xff…...

C++——调用OpenCV和NVIDIA Video Codec SDK库实现使用GPU硬解码MP4视频文件

系列文章目录 参考博客 参考博客 参考博客 文章目录 系列文章目录前言一、下载安装NVIDIA Video Codec SDK1、下载NVIDIA Video Codec SDK2、安装NVIDIA Video Codec SDK 二、下载编译安装OpenCV1、下载OpenCV2、编译安装OpenCV3、配置环境变量4、报错解决报错一&#xff1a; …...

dify升级最新版本(保留已创建内容)

dify安装参考文章&#xff1a; DeepSeek&#xff0b;Dify本地部署私有化知识库 如果之前安装的时候&#xff0c;是通过docker镜像的方式。 从网上下载最新的dify包&#xff0c;下载地址&#xff1a; https://github.com/langgenius/dify 下载完成后&#xff0c;把文件覆盖原…...

4、RabbitMQ的七种工作模式介绍

目录 一、Simple(简单模式) 1.1 概念 1.2 代码实现 消费者 运行结果 二、Work Queue&#xff08;工作队列&#xff09; 2.1 概念 1.2 代码实现 生产者 消费者 运行结果 三、Publish/Subscribe&#xff08;发布/订阅模式&#xff09; 3.1 概念 3.2 代码实现 生产者…...

React Three Fiber 详解:现代 Web3D 的利器

React Three Fiber 详解:现代 Web3D 的利器 随着 Web 技术的发展,3D 场景与交互已经不再是游戏开发者的专利。越来越多的网站、产品页、交互动画,开始大量引入 3D 元素。要在 React 项目中高效使用 WebGL,React Three Fiber(简称 R3F)成为了目前最主流的选择。 今天这篇…...

同步与互斥(同步)

线程同步 条件变量 当⼀个线程互斥地访问某个变量时&#xff0c;它可能发现在其它线程改变状态之前&#xff0c;它什么也做不了。 例如⼀个线程访问队列时&#xff0c;发现队列为空&#xff0c;它只能等待&#xff0c;只到其它线程将⼀个节点添加到队列中。这种情况就需要⽤到条…...

C语言教程(二十一):C 语言预处理器详解

一、预处理器概述 C语言预处理器是一个文本替换工具&#xff0c;它会对源代码进行扫描&#xff0c;处理以 # 开头的预处理指令。这些指令可以控制预处理器的行为&#xff0c;实现宏定义、文件包含、条件编译等功能。预处理器的主要作用是为后续的编译过程准备代码。 二、常见的…...

grafana/loki 设置日志保留时间

loki:limits_config:retention_period: 189h参考官网 Configuring the retention period...

Spring Boot × K8s 监控实战-集成 Prometheus 与 Grafana

在微服务架构中&#xff0c;应用的可观测性至关重要。Kubernetes 已成为容器化部署的标准&#xff0c;但其自身的监控能力有限&#xff0c;需要与其他工具集成才能实现详细的运行数据采集与分析。 本文将通过 Spring Boot Kubernetes Prometheus Grafana 实战&#xff0c;打…...

SpringBoot+Mybatis通过自定义注解实现字段加密存储

&#x1f60a; 作者&#xff1a; 一恍过去 &#x1f496; 主页&#xff1a; https://blog.csdn.net/zhuocailing3390 &#x1f38a; 社区&#xff1a; Java技术栈交流 &#x1f389; 主题&#xff1a; SpringBootMybatis实现字段加密 ⏱️ 创作时间&#xff1a; 2025年04月…...