2

次のスタイルを使用して、ホバー時に背景グラデーションを使用してスタイル設定されたメニュー項目がいくつかあります。

#sidebar ul li a:hover {
    background-image: linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -o-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(68,68,68) 5%, rgb(51,51,51) 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.05, rgb(68,68,68)),
        color-stop(1, rgb(51,51,51))
    );
    color: #f0f0f0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

私の質問は、CSS3トランジションまたはアニメーションを使用して、新しい背景（グラデーションで定義）を右からスライドインさせることは可能ですか？または、スプライト画像またはJavascriptを使用する必要がありますか？

4

3 に答える 3

7

グラデーションでのアニメーションはまだサポートされていません。ただし、このサイトは、ホバーのアニメーションのような感覚のための楽しいアプローチを提供します-

http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/

サンプルcss：-

#DemoGradient{  
    background: -webkit-linear-gradient(#C7D3DC,#5B798E);  
    background: -moz-linear-gradient(#C7D3DC,#5B798E);  
    background: -o-linear-gradient(#C7D3DC,#5B798E);  
    background: linear-gradient(#C7D3DC,#5B798E);  

    -webkit-transition: background 1s ease-out;  
    -moz-transition: background 1s ease-out;  
    -o-transition: background 1s ease-out;  
    transition: background 1s ease-out;  

    background-size:1px 200px;  
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position:100px;  
}
于 2013-01-02T04:13:45.487 に答える
1

グラデーションはまだトランジションをサポートしていないようです（まだ）：

グラデーションの背景でCSS3トランジションを使用する

css3グラデーションではなく背景画像を使用する場合は、cssトランジションを使用して画像をアニメーション化できます。

于 2013-01-02T04:02:39.203 に答える
0

これをハックとして試してください：

<div class="background-animate">
  <div class="content">Hi im content</div>
</div>

そしてそれをスタイリング

.background-animate {
    position: relative;
    z-index: 10;
    display: block;
    background: transparent;
}
.background-animate:before {
    content: "";
    position: absolute;
    transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out;
    top:0; left: 0; right: 0; bottom: 0; z-index:-1;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 40%, #e9eae9 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 40%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 40%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:before {
    opacity: 0;
}
.background-animate:after {
    content: ""; opacity: 0;
    transition: opacity .35s ease-in-out;
   -moz-transition: opacity .35s ease-in-out;
   -webkit-transition: opacity .35s ease-in-out;
    position: absolute;
    top:0; left: 0; right: 0; bottom: 0; z-index:-1;
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 80%, #e9eae9 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 80%,#e9eae9 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 80%,#e9eae9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.background-animate:hover:after {
    opacity: 1;
}

基本的に、不透明度をグラデーションに切り替えます。ここにあるデモhttps://codepen.io/anon/pen/eWOEoR

于 2017-04-11T14:29:19.110 に答える