如何淡入改變CSS中的元素

我試圖淡入淡出編輯元素在CSS中的元素。特別是將border從solid更改爲dotted，通過淡化更改，我該怎麼做？如何淡入改變CSS中的元素

編輯：

也許我需要更具體的瞭解方面，這裏是我當前的代碼：

li { 
    font-family: 'Roboto', sans-serif; 
    font-size: 20px; 
    color: black; 
    border-bottom: 1px solid black; 
} 

li:hover { 
    border-bottom: 1px dotted black; 
    opacity: 1; 
    transition: opacity 1s ease-in-out; 
}

來源

2017-08-03 Isaac Dragon

一般情況下，使用'transition'。但是你不能'過渡''border-style'屬性，對不起。你需要第二個元素，你可以交叉淡化它... –

一些屬性不能褪色，但通常你可以使用'transition：all ease 1s'，其中'1s'表示衰減以秒爲單位發生的持續時間。我將使用'pseudo-element'並將'opacity'轉換爲'：hover'而不是 –

[這是一個交叉淡入淡出的示例]（https://jsfiddle.net/23r0psjc/），使用僞元素。 –

你可以把2周的div與不同的行程類型彼此之上再過渡出來。

* { 
 
    box-sizing: border-box; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
} 
 
div { 
 
    width: 11rem; 
 
    height: 11rem; 
 
    margin: auto; 
 
    background-color: #f2f2f2; 
 
    border: 5px #bbb solid; 
 
    border-radius: 2rem; 
 
    opacity: 1; 
 
    cursor: pointer; 
 
} 
 
.dotted { 
 
    border: 5px #bbb dotted; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 0; 
 
} 
 
.solid { 
 
    position: relative; 
 
    z-index: 1; 
 
    transition: opacity 1s; 
 
} 
 
.solid:hover { 
 
    opacity: 0; 
 
}

<div class="solid"></div> 
 
<div class="dotted"></div>

來源

2017-08-03 16:47:16 basement

更好地完成僞元素而不是額外的標記，但仍然是一個好方法。 – chazsolo

確實如此。 Pseudo會比HTML少一行，也許會更優雅一些。 – basement

Here是一些CSS技巧，讓這種效果。裏面的缺點是不能透明。

div { 
 
    position: relative; 
 
    width: 50px; 
 
    height: 50px; 
 
    display: block; 
 
    border: 3px dotted red; 
 
    background: red; 
 
    transition: 1s ease-in-out all; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: white; 
 
} 
 

 
div:hover { 
 
    background: transparent; 
 
}

<div></div>

來源

2017-08-03 16:50:33

使用''之後'使這更清潔。 –

可以使用pseudoelements實現這一目標。即使透明背景，該版本也可以工作。添加漸變到正文以顯示此。

div { 
 
    position: relative; 
 
    
 
    /* just styles for demo */ 
 
    width: 250px; 
 
    height: 250px; 
 
    border-width: 5px; 
 
    border-style: solid; 
 
    transition: 1s ease-in-out all; 
 
    border-radius: 10px; 
 
} 
 

 
div:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    top: -5px; 
 
    bottom: -5px; 
 
    left: -5px; 
 
    right: -5px; 
 
    border-width: inherit; 
 
    border-style: dotted; 
 
    border-radius: inherit; 
 
} 
 

 
div, div:after { 
 
    border-color: tomato; 
 
} 
 

 
div:hover { 
 
    border-color: transparent; 
 
} 
 

 
/* just styles for demo showing that this will work even for transparent background */ 
 
body { 
 
    background-image: linear-gradient(to bottom, transparent, #ddd); 
 
    min-height: 100vh; 
 
    margin: 0; 
 
}

<div></div>

來源

2017-08-03 17:13:16

這不是一個洙優雅的解決方案，但它熄滅在我原來的問題「Niet的黑暗ABSOL的」評論。代碼如下：

li { 
    font-family: 'Roboto', sans-serif; 
    font-size: 20px; 
    color: black; 
    position: relative; 
    border-bottom: 1px solid transparent; /* invisible border */ 
} 

li:before, li:after { 
    content: ''; 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    margin: -1px; /* same as border width */ 
    transition: opacity 1s linear; 
} 

li:before { 
    border-bottom: 1px solid #000; 
} 

li:after { 
    border-bottom: 1px dotted #000; 
    opacity: 0; 
} 

li:hover:before { 
    opacity: 0; 
} 

li:hover:after { 
    opacity: 1; 
}

來源

2017-08-04 06:16:22

如何淡入改變CSS中的元素

回答

相關問題