Question

我正在编写5个不同元素（奖章/徽章）的一些CSS过渡。我觉得我已经以非优化的方式完成了它，所以我想知道是否可以编写相同的代码，但代码更少？

以下是代码：

#nav .badges { float:left; height: 173px; width: 173px; background-color: #fff; /*margin:  0 50px 50px 0;*/ display: block; margin-left: 21px; margin-bottom: 20px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; }
   #slidingDoors-bronze-badge { background-image: url('../images/menu-badge-bronse_01.png'), url('../images/menu-badge-bronse_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-bronze-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }
   #slidingDoors-silver-badge { background-image: url('../images/menu-badge-solv_01.png'), url('../images/menu-badge-solv_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-silver-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }
   #slidingDoors-gold-badge { background-image: url('../images/menu-badge-gold_01.png'), url('../images/menu-badge-gold_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-gold-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }
   #slidingDoors-sapphire-badge { background-image: url('../images/menu-badge-safir_01.png'), url('../images/menu-badge-safir_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-sapphire-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }
   #slidingDoors-agat-badge { background-image: url('../images/menu-badge-agat_01.png'), url('../images/menu-badge-agat_02.png'), url('../images/menu-badge-gull-hover.png') !important; background-repeat: no-repeat !important; background-position: 0px 0px, 87px 0px, 0px 180px !important; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; }
   #slidingDoors-agat-badge:hover { background-position: -63px 0px, 150px 0px, 0px 0px !important; }

Answer 1

如果唯一的区别是徽章图片/颜色，那么为什么不将它分成几个类？

.coreclass {
   background-repeat: no-repeat !important;
   background-position: 0px 0px, 87px 0px, 0px 180px !important;
   -webkit-transition: all 500ms ease-in-out;
   -moz-transition: all 500ms ease-in-out;
   -o-transition: all 500ms ease-in-out;
   -ms-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
}
.gold { gold stuff here}
.gold:hover { gold hover stuff }
.silver etc...

然后

<div class="coreclass gold">...</div>

Answer 2

webkit是最后一个需要供应商前缀的引擎，所有其他人都支持它前缀。

http://caniuse.com/#search=transition

.coreclass {
    background-repeat: no-repeat !important;
    background-position: 0px 0px, 87px 0px, 0px 180px !important;
   -webkit-transition: all 500ms ease-in-out;
   transition: all 500ms ease-in-out;
}

（sry将其添加为另一个答案;还没有足够的评论点......）

用更少的CSS代码写这个？

2 个答案: