前言： 通过模仿进度条进度，来练习使用过渡动画。
HTML代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .bar { margin: 0 auto; width: 150px; height: 15px; border: 1px solid red; border-radius: 7px; } .bar_in { width: 50%; height: 100%; background-color: red; border-radius: 7px; /* transition:要过渡的属性 花费时间 运动曲线 何时开始 */ transition: width .5s ease 0s; } .bar:hover .bar_in { width: 100%; } </style> </head> <body> <div class="bar"> <div class="bar_in"> </div> </div> </body> </html>
具体效果如下：
