0

こんにちは、フレンドリーなのぞき見スタック、

次の CSS ホバー効果がどのように生成されるかは誰でも知っています。

http://seanwes.com/

ソーシャル ナビゲーション アイコンを代替画像 (一般的な色) のフリップ スタイルに置き換えるためのスタック オーバーフローに関するチュートリアルが他にもいくつかあります。それは何か関係があるかもしれないと考えています：

-webkit-transition: all .2s linear;
-o-transition: all .2s linear;
-moz-transition: all .2s linear;
transition: all .2s linear;

考え？ありがとう！

4

2 に答える 2

2

あなたの質問への答えはとてもシンプルです

カーソル<li>を合わせると、負のマージンが適用されます。これは、バーの HTML コードです。

<ul id="social" class="msixcol mlast mright">
    <li id="twitter" class="fade"><a href="http://twitter.com/seanwes/" class="r">twitter</a></li>
    <li id="facebook" class="fade"><a href="http://www.facebook.com/seanwes" class="r">facebook</a></li>
    <li id="dribbble" class="fade"><a href="http://dribbble.com/seanwes" class="r">dribbble</a></li>
    <li id="instagram" class="fade"><a href="http://instagram.com/seanwes" class="r">instagram</a></li>
</ul>

そして、これは魔法のトリックを行う css 行です。

#social li:hover { margin-top: -3px; }

そして、トランジションは滑らかな効果を与えるだけです:

a,.fade,input,textarea { -webkit-transition: all .2s linear; -o-transition: all .2s linear; -moz-transition: all .2s linear; transition: all .2s linear; }
于 2013-04-10T12:22:11.553 に答える
1

こんにちは、これは非常に簡単です。ここでは、基本的なコードをいくつか示します。

CSS: 

.image{
    width:200px;
    height:200px;
    background:red;
    margin:0 auto;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML: 

<div class="image transition"></div>

このようにして、必要な要素にトランジションをクラスとして適用できます。トランジションは、:hover に記述したすべてのものに適用されることを覚えておいてください。

ここに動作するフィドルがあります

これをリストに適用するためのコードを次に示します。

CSS: 

ul{list-style:none; float:left;}
ul li{margin:15px;}
.image{
    width:200px;
    height:200px;
    background:red;
}

.transition{
    -webkit-transition: all .2s linear;
    -o-transition: all .2s linear;
    -moz-transition: all .2s linear;
    transition: all .2s linear;
}

.image:hover{
    box-shadow:0px 0px 15px 0px black;
}

HTML: 

<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>
<ul>
    <li class="image transition"></li>
    <li class="image transition"></li>
    <li class="image transition"></li>
</ul>

そしていつも のようにフィドル

background:red;プロパティをに置き換えるだけ
background-image:url(yourimagepath.ext);で、準備完了です。

于 2013-04-10T13:09:37.043 に答える