一款漂亮的列表彩色动态条

技术交流
2 1117
深蓝
深蓝 举报
02月08日 04:02
效果图:



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);}

前端:

/template/c_default/html/articles_lists.html

大约14行 class加入:"Db-list"


效果演示:查看演示

倒序看帖 只看楼主
回帖