话说 1对情侣两情相悦，你情我愿。时机成熟，夜深人静。、。咳 ，如果就这么直奔主题，是不是有点猴急，所以，还是要来点前戏@。 铛 铛， 这个时候 过渡模块出现了。
划重点：
上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 50px; background-color: red; /* 告诉浏览器哪个属性需要执行过渡效果 */ transition-property: width background-color; /* 过渡效果持续的时长 */ transition-duration: 5s,5s; } /* hover 这个伪类选择器出了可以用在a 标签上，还可以用在其他任何标签上 */ div:hover{ width: 500px; background-color: blue; } /* 过渡三要素 1. 必须要有属性变化。 2. 必须告诉系统哪个属性需要执行过渡效果。 3. 必须告诉系统过渡效果持续时长。 注意点： 当多个属性需要同时执行过渡效果时，用逗号隔开即可。 transition-property: width background-color; transition-duration: 5s,5s; */ </style> </head> <body> <div></div> </body> </html>
原文：https://www.cnblogs.com/-Tony/p/9190060.html