过渡:是从一种状态渐渐过渡到另外一种状态
transition:过渡的属性 花费的时间 运动曲线 何时开始
- 属性:想要变化的css属性,宽度高度 颜色背景,内外边距都可以
- 花费的时间:单位是秒
- 运动曲线:默认是ease(可以省略)
- 何时开始:单位是秒,可以设置延迟触发时间(可以省略)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 200px; height: 30px; background-color: #018ffb; transition:width .5s; } div:hover{ width: 600px; } </style> </head> <body> <div></div> </body> </html>