0

このサイトで右のナビゲーションのような効果を作成しようとしています:

http://dianabobar.com/

jQueryで。途中から色が開くような効果を狙っているのですが、残念ながらそのサイトはFlashで作っているので勉強する余裕がありません。何を検索すればよいかよくわかりません。「背景ラジアルアニメーションjquery」とか「中心から背景色アニメーションjquery」とか考えていました。

ここで詳しく説明したように、CSS3のイーズインも検討しました（中央から背景を展開する（CSS / Javascript））。問題は、この質問に対する答えが、CSS3 トランジションが垂直に動作する必要があるときに水平に動作していることだけを示していることです。彼らが回答で使用していたJSFiddle（http://jsfiddle.net/SNzgs/）を使用しましたが、アニメーションへの遷移は中央からではなく上から下に行くようにしか見えません。彼らが持っているコードは次のとおりです。

.redline {background:red;height:10px;width:0;margin:auto;}

.container:hover .redline {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

私が試したコードは次のとおりです。

.redline {background:red;height:0px;width:10px;margin:auto;}

.container:hover .redline {
    height:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

ご協力いただきありがとうございます！

4

6 に答える 6

3

私の解決策はmatewkaによるものと似ていますが、疑似要素:beforeと:after疑似要素の両方を使用しています。マークアップの例は次のとおりです。

<nav>
    <ul>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

CSS の場合:

nav ul {
    list-style: none;
    width: 6em;
}
nav ul li {
    background-color: #eee;
    position: relative;
}
    nav ul li:before,
    nav ul li:after {
        background-color: #333;
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;       /* Vertically positions pseudo elements in the center */
        bottom: 50%;    /* Vertically positions pseudo elements in the center */
        transition: all .125s ease-in-out;
        z-index: 50;
    }
nav ul li a {
    color: #333;
    display: block;
    padding: .5em 1em;
    position: relative;
    z-index: 100;
    transition: all .125s ease-in-out;
}
nav ul li a:hover {
    color: #eee;
}
    nav ul li:hover:before {
        top: 0;    /* Forces :before to stretch to fill top half */
    }
    nav ul li:hover:after {
        bottom: 0; /* Forces :after to stretch to fill bottom half */
    }

http://jsfiddle.net/teddyrised/rRtmB/

于 2013-10-14T22:43:59.103 に答える
2

:after擬似要素と絶対配置で簡単に実行できます。次に、そのシェーディング ボックスheightのtopプロパティを組み合わせることができます。 私は完全に新しいフィドルを作成しました: http://jsfiddle.net/SNzgs/5/あなたのフィドルは水平方向に仕事をするように作られています。

.container:after {
    content: "";
    display: block;
    background: #ccc;
    width: 100%;
    height: 0;
    top: 0.5em;
    position: absolute;
    left: 0;

    transition: all 1s ease-out;
}
.container:hover:after {
    top: 0;
    height: 100%;
}
于 2013-10-14T22:41:59.533 に答える
1

:after疑似要素を使用して、アニメーションの背景を作成できます。

CSS

ul {
    margin: 0;
    padding: 0;
}
ul > li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul > li > a {
    display: block;
    padding: 10px;
    color: #000000;
    text-decoration: none;
    position: relative;
    z-index: 10;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover > a {
    color: #ffffff;
}
ul > li:after {
    content: " ";
    position: absolute;
    top: 50%;
    bottom: 50%;
    left: 0;
    right: 0;
    background: #353535;
    z-index: 0;
    -webkit-transition: all 400ms;
    transition: all 400ms;
}
ul > li:hover:after {
    top: 0;
    bottom: 0;
}

HTML

<ul>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
    <li><a href="">Hello</a></li>
</ul>

デモ

于 2013-10-14T22:45:29.400 に答える
0

フィドルを少し変更するだけで、同様の効果を再現できます。

<div class="container">
    <span class="vertgrey">
        <span class="vertredline"></span>        
    </span>
    <span class="greyline">
        <span class="redline"></span>
    </span>
</div>

そしてCSS：

.container {height:100px;width:200px;background:#eee;position:relative;}
.container span {display:block;}
.greyline {background:#ccc;height:10px;width:200px;position:absolute;bottom:45px;}
.redline, .vertredline {background:red;height:10px;width:0;margin:auto;}
.vertgrey {
    background: #CCC;
    height: 100%;
    position: absolute;
    width: 10px;
    left: 90px;
}
.container:hover .redline {
    width:200px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}
.container:hover .vertredline {
    height:100%;
    width: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

これは、更新されたフィドルへのリンクです: http://jsfiddle.net/SNzgs/4/

于 2013-10-14T22:39:11.713 に答える
0

これがあなたのための解決策です：

フィドル: http://jsfiddle.net/itsmikem/gF28Y/

CSS:

.container {height:100px;width:200px;background:#eee;position:absolute;}
.greyline {display:block;position:relative;background:#000;height:0%;width:100%;}
.redline {display:block;position:relative;background:#f00;height:0%;width:100%;margin-top:50px;}
.container:hover .redline {
    margin-top:0px;
    height:100px;
    -webkit-transition: all 0.3s ease-out;
    transition:all 0.3s ease-out;
}

html:

<div class="container">
    <div class="greyline">
       <div class="redline"></div>
    </div>
</div>
于 2013-10-14T22:43:53.567 に答える