0

こんにちは友人たち 背景画像を使用し、ナビゲーション リストにネストされたカスタム下線の不透明度遷移の厳密な CSS3 修正を探しています。背景画像の遷移が現在サポートされていないことを調査した結果、疑似クラス :before を使用して不透明度の遷移を構築しようとしましたが、現在 Chrome と Firefox の最新バージョンで動作していると思います。誰でも提供できるヘルプは非常に高く評価されます。私はウェブ上のあらゆる場所を調べましたが、カスタムの下線の背景画像でトランジションを実行しようとした人を他に見つけることができないので、うまくいけば誰かにとってのちょっとした挑戦を防ぐことができますか?

これが私が現在持っているコードです:

.sf-menu, .sf-menu * {
margin:0 auto;
padding:0;
list-style: none;}


.sf-menu {
float: left;
margin-left:27%;}


ul.sf-menu li {
position:relative;
line-height:40%;
margin-left:10px;
margin-right:10px;}


ul.sf-menu > li {
float: left;}


ul.sf-menu li {
white-space: nowrap; /* no need for Supersubs plugin */
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ }  


ul.sf-menu li:hover > a {
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity:1;
-moz-opacity: 1;
opacity: 1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;}


ul.sf-menu li:before  {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url(../images/UNDERLINE.png) repeat-x 100% 100%;
-webkit-opacity: 0.1;
-moz-opacity: 0.1;
opacity: 0.1;}`

また、www.mdwoodman.co.uk で私のサイトの現在のフレームワークを見つけることができます。

前もって感謝します！

4

1 に答える 1

0

背景画像を CSS ボーダーに置き換えてトランジションすることができます。ウェブサイトの概算は次のとおりです。

ul li a {
    color: white;
    text-decoration: none;
    font: bold 15px/150% sans-serif;
    text-transform: uppercase;
    padding: 2px 5px;
    border-bottom: solid #384740 3px;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

ul li a:hover {
    color: #BDE2DF;
    border-bottom-color: #66FFB2;
}

境界線の色を移行するには、計算された色を取得するか、色をrgbaまたはhslaで指定します。たとえば...

ul li a       { border-bottom: solid rgba(102, 255, 178, 0.1); }
ul li a:hover { border-bottom: solid rgba(102, 255, 178, 1.0); }

http://jsfiddle.net/de9wT/

于 2013-07-10T02:56:29.857 に答える