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

將 CSS3 轉(zhuǎn)場(chǎng)與漸層背景結(jié)合使用
P粉217629009
P粉217629009 2023-08-23 21:25:42
0
2
769
<p>我試圖在滑鼠懸停時(shí)使用 css 在縮圖上轉(zhuǎn)換,以便在懸停時(shí)背景漸變淡入。轉(zhuǎn)換不起作用,但如果我只是將其更改為 <code>rgba()<!--代碼-->值,它工作正常。不支援漸層嗎?我也嘗試過(guò)使用圖像,它也不會(huì)轉(zhuǎn)換圖像。 </code></p><code> <p>我知道這是可能的,因?yàn)樵诹硪黄恼轮杏腥俗龅搅耍也恢赖降资窃觞N做到的。任何幫助> 這是一些可以使用的 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-漸變轉(zhuǎn)場(chǎng)與背景位置/

#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ò)渡(儘管當(dāng)前規(guī)範(fàn)表示它們應(yīng)該支持透過(guò)插值實(shí)現(xiàn)類(lèi)似漸變到類(lèi)似漸變的過(guò)渡。)。

如果您想要具有背景漸層的淡入效果,則必須在容器元素上設(shè)定不透明度,並且「過(guò)渡」不透明度。

(已經(jīng)有一些瀏覽器版本支援漸變過(guò)渡(例如 IE10。我於 2016 年在 IE 中測(cè)試了漸變過(guò)渡,當(dāng)時(shí)它們似乎可以工作,但我的測(cè)試程式碼不再工作。)

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

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

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