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 に答える