6

はめ込みボックスシャドウで始まり、外側ボックスシャドウで終わるWebトランジションに取り組んでいます。以下のjsfiddleに例を示します。問題は、ボックスシャドウWebトランジションが機能しない通常のインセットですが、アウターへのインセットは機能しません。

http://jsfiddle.net/xq4qc/

HTML

<div class="greyrow"> 
    good transition
    </div>
<br/>
<br/>
<div class="whiterow"> 
    no transition
    </div>

CSS

.greyrow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.greyrow:hover{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: -webkit-box-shadow 1s;
    -moz-transition: -moz-box-shadow 1s;
    -o-transition: -o-box-shadow 1s;
    transition: box-shadow 1s;


}

.whiterow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.whiterow:hover{

-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
-webkit-transition: -webkit-box-shadow 2s;
    -moz-transition: -moz-box-shadow 2s;
    -o-transition: -o-box-shadow 2s;
    transition: box-shadow 2s;


}
4

3 に答える 3

19

トランジションでそれを行うことができます。

秘訣は、遷移がキーワードではなく数値で行われる必要があるということです。

したがって、通常の状態を2つのシャドウ、1つのインセット、もう1つのアウターとして指定し、そのうちの1つを0に設定する必要があります（つまり、非表示になります）。

.keyframe {
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 5s;
}

サイズと時間に大きな値を設定して、見やすくしました。次に、ホバーされた状態は次のとおりです。

.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}

シャドウ間には対応関係があるため、ブラウザは数値を遷移するだけでよいことに注意してください（すべてのデータである可能性がありますが、「inset」キーワード）。

フィドル

.keyframe {
    box-shadow: inset 0 0 10px #aaa;
    height:100px;
    width:250px;
    padding:10px;
    margin-bottom: 10px;
    left: 40px;
    top: 40px;
    position: absolute;
    border:1px solid #CCCCCC;
    box-shadow: inset 0 0 60px red, 0 0 0px blue;
    transition: box-shadow 3s;
}
.keyframe:hover {
    box-shadow: inset 0 0 0px red, 0 0 60px blue;
}
<div class="keyframe"> 
    dual shadow transition (hover me)
</div>

于 2013-05-13T21:51:30.640 に答える
10

インセットシャドウとアウトセットシャドウを切り替える前に、最初にnoneにアニメートすると、キーフレームにかなり近づくことができます。（これらはキーワードであり、数値ではないため、これを直接アニメーション化することはできません。つまり、「almostInset」シャドウはありません）。

次のcssを検討してください。

.box {
    box-shadow: inset 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeOut 1s;
}
.box:hover {
    box-shadow: 0 0 10px #aaa;
    /*add prefixes*/animation: shadowFadeIn 1s;
}

@/*add prefixes*/keyframes shadowFadeIn {
    0% { box-shadow: inset 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 10px #aaa; }
}

@/*add prefixes*/keyframes shadowFadeOut {
    0% { box-shadow: 0 0 10px #aaa; }
    50% { box-shadow: none; }
    100% { box-shadow: inset 0 0 10px #aaa; }
}

Webkitのデモ： http：//jsfiddle.net/xq4qc/1/

私が考えることができる1つの欠点は、これが最初のページの読み込み時に影もアニメーション化することです。

于 2013-02-25T11:46:06.910 に答える
2

これを実現するもう1つの方法は、2つの要素のボックスシャドウを遷移させることです。したがって、内側の要素の影を10pxから0に移行し、次に外側の要素で同時に0から10pxに移行します。

.outer {
  display: inline-block;
  box-shadow: 0 0 0 #000;
}
.outer:hover {
  box-shadow: 0 0 30px #000;
}
.inner {
  width: 150px;
  height: 150px;
  background: #ee3b3b;
  box-shadow: inset 0 0 30px #000;
}
.inner:hover {
  box-shadow: inset 0 0 0 #000;
}

ここでの例：http：//codepen.io/Probocop/pen/yyrqNG

于 2015-04-02T17:11:37.487 に答える