transition可实现CSS样式平滑过渡，通过property、duration、timing-function和delay四个子属性控制动画效果，常用于鼠标悬停等交互场景。
在CSS中，transition 可以让元素从一种样式平滑地过渡到另一种样式，实现渐变动画效果。它常用于鼠标悬停、状态变化等交互场景。
1. 基本语法
使用 transition 属性需要定义以下四个子属性（可简写）：
property：指定要过渡的CSS属性，如 width、color、opacity 等 duration：过渡持续时间，单位为秒（s）或毫秒（ms） timing-function：过渡的速度曲线，如 ease、linear、ease-in-out delay：延迟多久开始过渡
示例：
pre {
transition: property duration timing-function delay;
}
2. 实现颜色渐变效果
比如让一个按钮的背景色在鼠标悬停时缓慢变为红色：
立即学习“前端免费学习笔记（深入）”；
.button {
background-color: blue;
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}
这样，背景色会在0.5秒内从蓝色渐变到红色，使用 ease 缓动函数更自然。
稿定抠图
AI自动消除图片背景
76 查看详情
3. 多属性过渡
如果想同时过渡多个属性，可以用逗号分隔：
.box {
width: 100px;
height: 100px;
background-color: green;
transition: width 0.4s ease, height 0.4s ease, background-color 0.6s linear;
}
.box:hover {
width: 150px;
height: 150px;
background-color: yellow;
}
宽度和高度变化较快，背景色变化稍慢且匀速。
4. 常见可过渡属性
以下属性支持 transition 动画：
颜色类：color、background-color、border-color 尺寸类：width、height、font-size 位置类：margin、padding、top、left、transform 透明度：opacity 变换：transform（rotate、scale、translate）
注意：display 和 z-index 等非数值属性不能直接过渡。
基本上就这些，合理使用 transition 能让界面更生动自然。
以上就是在css中如何用transition实现元素渐变效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1022795.html
微信扫一扫 
支付宝扫一扫 
