国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

將 CSS3 過渡與漸變背景結(jié)合使用
P粉217629009
P粉217629009 2023-08-23 21:25:42
0
2
772
<p>我試圖在鼠標懸停時使用 css 在縮略圖上進行轉(zhuǎn)換,以便在懸停時背景漸變淡入。轉(zhuǎn)換不起作用,但如果我只是將其更改為 <code>rgba()<!--代碼-->值,它工作正常。不支持漸變嗎?我也嘗試過使用圖像,它也不會轉(zhuǎn)換圖像。</code></p><code> <p>我知道這是可能的,因為在另一篇文章中有人做到了,但我不知道到底是怎么做到的。任何幫助> 這是一些可以使用的 CSS:</p> <pre class="brush:css;toolbar:false;">#container div a { -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: absolute; width: 200px; height: 150px; border: 1px #000 solid; margin: 30px; z-index: 2 } #container div a:hover { background: -webkit-gradient(radial, 100 75, 100, 100 75, 0, from(rgba(0, 0, 0, .7)), to(rgba(0, 0, 0, .4))) } </pre> <p><br /></p></code>
P粉217629009
P粉217629009

全部回復(2)
P粉226642568

一種解決方法是轉(zhuǎn)換背景位置以產(chǎn)生漸變變化的效果: http://sapphion.com/2011/10/css3-漸變過渡與背景位置/

#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;  
}  
<div id="DemoGradient"></div>  
P粉787934476

漸變尚不支持過渡(盡管當前規(guī)范表示它們應該支持通過插值實現(xiàn)類似漸變到類似漸變的過渡。)。

如果您想要具有背景漸變的淡入效果,則必須在容器元素上設(shè)置不透明度,并“過渡”不透明度。

(已經(jīng)有一些瀏覽器版本支持漸變過渡(例如 IE10。我于 2016 年在 IE 中測試了漸變過渡,當時它們似乎可以工作,但我的測試代碼不再工作。)

更新:2018 年 10 月 具有無前綴新語法的漸變過渡[例如Radial-gradient(...)] 現(xiàn)在確認可以(再次?)在 Microsoft Edge 17.17134 上運行。我不知道這個是什么時候添加的。仍然無法在最新的 Firefox 和 Chrome / Windows 10 上運行。

更新:2021 年 12 月 現(xiàn)在,在最近的基于 Chromium 的瀏覽器中可以使用 @property 解決方法(但在 Firefox 中不起作用)。請參閱(并投票)下面(或上面 YMMV)@mahozad 的回答

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板