0

我正在编写 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; }
4

2 回答 2

8

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

.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>
于 2013-01-22T19:44:08.647 回答
0

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

（很高兴将其添加为另一个答案；还没有足够的评论点...）

于 2013-01-23T03:30:40.230 回答