0

親要素の「ホバー」アクションで2つの要素をアニメーション化する必要があります。

JSフィドルは：こちら

ここに同じコードを含めました：

ここに私のHTMLコードがあります:

<div class="dealList"><a href="#" title="View Deal" class="viewDeal"><span>&nbsp;</span>View</a></div>

そしてCSS3は

-webkit-animation-name: expand;-webkit-animation-duration: 1s;-webkit-animation-iteration-count: 1;    -webkit-animation-timing-function: linear;    -moz-animation-name: expand;     -moz-animation-duration: 1s;     -moz-animation-iteration-count: 1;    -moz-animation-timing-function: linear;}.dealList .viewDeal span{    display: inline-block;    width: 14px;    height: 14px;    background: url(../images/star_view.png) no-repeat;    -webkit-transition-property: -webkit-transform;    -webkit-transition-duration: 1s;    -moz-transition-property: -moz-transform;    -moz-transition-duration: 1s;}.dealList .viewDeal:hover span{    -webkit-animation-name: rotate;     -webkit-animation-duration: 2s;     -webkit-animation-iteration-count: infinite;    -webkit-animation-timing-function: linear;    -moz-animation-name: rotate;    -moz-animation-duration: 2s;    -moz-animation-iteration-count: infinite;    -moz-animation-timing-function: linear;}@-webkit-keyframes rotate {    from {-webkit-transform: rotate(0deg);}    to {-webkit-transform: rotate(-360deg);}}@-moz-keyframes rotate {    from {-moz-transform: rotate(0deg);}    to {-moz-transform: rotate(360deg);}}@-webkit-keyframes expand {    from {width: 14px;}    to {width: 80px;}}@-moz-keyframes expand {    from {width: 14px;}    to {width: 80px;}}

星が回転する必要があり、「ビュー」が来るはずです。幅が最大値に達すると、それを維持し、星の回転を停止する必要があります。

これを修正するために私を助けてください。

4

1 に答える 1

0

表示プロパティを に変更しますinline-block。

.dealList .viewDeal{
    display: inline-block; 
    ...

ここにフィドルがあります：http://jsfiddle.net/qrmWA/1/

于 2013-04-02T09:10:44.143 に答える