CSS learnning...
"Whenever this property changes, apply that change slowly."
The property transition: width 2s
says “when the width changes, animate it over the course of 2 seconds.”
transition: all 0.5s
says “when anything changes, spend 0.5s doing it.”
So if you want to round the corners of a button when it’s hovered?
/* Initial state: border-radius is 0. * When border-radius changes, it'll take 0.3s * instead of happening immediately */ button { border-radius: 0; transition: border-radius 0.3s; /* any other styles you need ... */ } button:hover { border-radius: 20px; }
Here’s the button:
1 .demo-button { transition: border-radius 0.3s; 2 border: 1px solid dodgerblue; background-color: #fff; 3 border-radius: 0; padding: 1em; color: dodgerblue; } 4 .demo-button:hover { border-radius: 20px; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步