0

のグラデーション背景にトランジションを作成しようとしています<div>。サイトに明るいスタイルと暗いスタイルの 2 つの異なるスタイルを実装したいので、このようにしようとしています。適切な色を選択し、2 つのテーマ間で変更する方法を実装した後、テーマ間の切り替えをスムーズにするトランジションを構築しない理由を考えました。

グラデーションを遷移させる方法を調べました。このブログを見つけました: Sapphion.com . を介してグラデーションを移行する方法について説明しますbackground-position。

コードをjsFiddleにコピーすると、うまくいきました。何を設定してもbackground-position、常に 0% から 100% までの完全なグラデーションに移行します。グラデーションの 50% から 100% のみが表示されるように、0% から 50% に移行したいと考えています。誰かがこれを行う方法を知っていますか、それとも何か見逃しましたか?

4

1 に答える 1

0

あなたの間違いは background-position: 100y; を指定することでした。ホバー状態。

だったはずです（グラデーションを垂直方向に移動しているため）

background-position-y: -100px;

完全な CSS:

#DemoGradient{
    background: linear-gradient(to bottom, #ffffff 0%, #bfbfbf 50%, #45484d 50%, #000000 100%);
    -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;  /* correct value if you want it to get at 50% */
    border-radius: 10px;  
    border: 1px solid #839DB0;  
    cursor:pointer;  
    width: 150px;  
    height: 100px;  
}  
#DemoGradient:Hover{  
    background-position-y: -100px;
}

更新されたデモ

于 2013-08-29T20:58:47.067 に答える