快慢条的实现

开发工具与关键技术：html+css
作者： 刘锦荣
撰写时间： 2019年1月30日

我们要实现一个快慢条是很简单的：（1）首先创建几个div：
<div class="bigBox" id="bigBox"> <div class="knt1"></div> <div class="knt2"></div> <div class="knt3"></div> </div>

（2）然后我们给这些盒子设置样式，`
#bigBox{
width: 400px;
height: 100px;
background:red;
margin: 20px;
cursor: pointer;
}
.knt1,.knt2,.knt3{
width:70px;
height:15px;
margin-top: 10px;
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
}
.knt1{
background: blue;
transition: width 3s linear;
}
.knt2{
background: white;
transition: width 3s ease;
}
.knt3{
background: #D4A211;
transition: width 3s ease-in;
}

（3）给盒子设置自己喜欢的样式后，然后给盒子一个伪类：`
#bigBox:hover div{
width: 400px;
}

（4）实现的效果如下：

（5）我们需要怎样的样式，可以自己设置出来。