經過輸入無線電發射的色彩過渡（僅限於CSS）

所以，這裏的交易..我有一個簡單的收音機和一個隱藏的div經過輸入無線電發射的色彩過渡（僅限於CSS）

<input type="radio" name="picture" id="radio-id" selected="false"> 
<label id="label-id" for="radio-id"></label> 
<div class="some-class"> 
</div>

與CSS：

.some-class{ 
position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%;   
    display:none; 
    background: white; 
    opacity: 0.7; 
    -webkit-transition: all 1s linear; 
     -moz-transition: all 1s linear; 
     -ms-transition: all 1s linear; 
     -o-transition: all 1s linear; 
      transition: all 1s linear; 
} 
#radio-id:checked ~ .some-class{ 
    display: block; 
    background: rgb(40, 44, 47); 
}

的問題在於，當收音機被檢查時，根本沒有轉換。 Div出現在新的背景下，但並不順利。

來源

2014-01-27 Ivailo Petrov Ivanov

具有以下

#radio-id:checked ~ .some-class { 
    display: block; 
    background: rgb(40, 44, 47); 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0.7; 
    -webkit-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 
}

來源

2014-01-27 12:03:31 sree

是的，我知道，這種方式是工作的罰款，但首先，在div必須更換CSS與顯示：無..然後，顯示：塊..它有趣，工作正常與可見性：隱藏/可見，但不顯示：塊/無.. –

所以你需要將它與無顯示的原因是什麼？ – sree

另外，在顯示無和顯示塊之間不可以進行css轉換。 – sree

HTML

<html> 
<input type="radio" name="picture" id="radio-id" selected="false"> 
    <label id="label-id" for="radio-id"></label> 
    <div class="some-class"> 
     hello 
    </div> 
</html>

的CSS

.some-class{ 
    position: fixed; 
     top: 100px; 
     left: 100px; 
     height:100px; 
     width: 100px;   
     display:none; 
     background: white; 
     opacity: 0.7; 
     -webkit-transition: all 1s linear; 
      -moz-transition: all 1s linear; 
      -ms-transition: all 1s linear; 
      -o-transition: all 1s linear; 
       transition: all 1s linear; 
    } 
    #radio-id:checked ~ .some-class{ 
     display: block; 
     background: rgb(40, 44, 47); 
    }

來源

2014-01-27 12:16:58

其實，這不是我想要的，sree答案爲我工作 –

經過輸入無線電發射的色彩過渡（僅限於CSS）

回答

相關問題