スコアリング効果を実現する CSS_html/css_WEB-ITnose

cssで実現されるスコアリング効果は、実際にはcssスピリット（css sprite）を拡張応用したもので、主にbackground-position属性を使って画像の位置を移動することで効果を実現します。以前、先輩がこの点について書いているのを見たのですが、ちょっと誤解がありました。

私の理解：background-position の位置が移動していないことと同じだと考える人もいます

参照: http :/ /www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html , 個人的には、div の位置は変更されずに画像の位置になるべきで、必要な小さなアイコンは次のようにすべきだと思います。背景位置を介して配置されます。 div の 0,0 位置に移動して、小さなアイコンの表示を完了します。また、移動中はbackground-positionの値がマイナスになり、画像が上方向に移動していることを示します。

上記の 1 つのアイコンの配置を含むブログは非常に詳細なので、5 つ星評価の効果だけを書きます:

よりよく理解するために、写真を加工しました:

最初のステップ:

開発良いプログラミング 私は関数の各部分を独立した部分にカプセル化することに慣れているので、ここで div 要素を直接設定します:

<div class="rating"></div>

ステップ 2:

5 つ星の評価には境界線のない 5 つの正方形が必要なので、 5 つのブロックを統合したい場合、クリック効果を実現するには、運ぶ要素はタグです:

<div class="rating">    <ul>        <li class="one">   <a href="#">1</a></li>        <li class="two">   <a href="#">2</a></li>        <li class="three"> <a href="#">3</a></li>        <li class="four">  <a href="#">4</a></li>        <li class="five">  <a href="#">5</a></li>    </ul></div>

ステップ 3:

構造が完成した後。セットアップし、CSS のデザインを開始します:

ul.rating {    position: relative;    list-style: none;    background: url("../images/star-matrix.gif") no-repeat 0 0;    width: 80px;    height: 16px;}ul.rating li {    float: left;    text-indent: -9999px;    cursor: pointer;}ul.rating li a {    text-decoration: none;    width: 16px;    height: 16px;    position: absolute;    top: 0;    left: 0;<strong> z-index: 10;/* 与  hover  中的z-index 对比实现另一重要效果，见下边说明  初步设计时可不考虑*/</strong>}/*仅仅是将 A 标签的区域定位至该出现的 UL 区域之中*/ul.rating li.one a {top: 0;  left: 0;}ul.rating li.two a {top:0px;  left: 16px;}ul.rating li.three a {top:0px;  left: 32px;}ul.rating li.four a {top:0px;  left: 48px;}ul.rating li.five a {top: 0px;  left: 64px;}

ステップ 4: 予備的なエフェクトは基本的に上記のコードによって完成します。 次に、マウスが小さな星の上に移動したときのエフェクトです:

思想是，在鼠标放在当前 A 标签时，A 标签的区域 变得 和 UL 区域一样大，通过background-position 属性定位到所对应的效果图片，并将其盖在之前空白星星上。ul.rating li a:hover{    width: 80px;    height: 16px;    overflow: hidden;    left: 0;    top: 0;    background: url("../images/star-matrix.gif") no-repeat 0 0;    z-index: 2;  /*  要实现 遮盖之前背景图像 功能使用 z-index 使当前对应图像图层浮于原图层之上 */}ul.rating li.one a:hover{    background-position: 0 -96px;}ul.rating li.two a:hover{    background-position: 0 -112px;}ul.rating li.three a:hover{    background-position: 0 -128px;}ul.rating li.four a:hover{    background-position: 0 -144px;}ul.rating li.five a:hover{    background-position: 0 -160px;}

ステップ 5: 5点褒めのエフェクトは完成しました（3番目のz-index属性は使用していません（太字部分））が、マウスをスライドさせると、前後ではなく1つのスコアしか選択できないことがわかります。理由LI 内のすべての A は下部で覆われているため、3 番目のステップでは、最初のステップでは、A タグが常に上部に表示されるように z-index 属性を使用します。これにより、マウス ポインターが上に浮かんだときに対応する効果が表示されます。要素。