一款漂亮的列表彩色动态条 - 大咖技术

大家好！今天我在其他网站上看到动画样式，不想自己写，所以把他扒下来，好了废话不多说，直接上图！

方法：

第一：将下面的代码加入到模板文件的css中！

.Db-list:after {content: "";position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color: #ff002b;visibility: hidden; -webkit-transform: scaleX(0);-o-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;-o-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;}
.Db-list:nth-child(6n+1):after{background-color:#2196f3}
.Db-list:nth-child(6n+2):after{background-color:#ffa900}
.Db-list:nth-child(6n+3):after{background-color:#00a753}
.Db-list:nth-child(6n+4):after{background-color:#b433ff}
.Db-list:nth-child(6n+5):after{background-color:#b37333}
.Db-list:hover:after {visibility: visible;-webkit-transform: scaleX(1);-o-transform: scaleX(1);transform: scaleX(1);}

第二：将Db-list加入对应的class容器中！

好了，本次分享就到这里了，如果有什么不懂得在下面的评论区评论欧！！！