當我們將滑鼠懸停在單詞上時，會出現一個流暢的影片，但當我們退出懸停狀態時，影片并沒有反轉，而是直接切掉了。 我怎樣才能使進入懸停狀態和退出懸停狀態時的影片都很流暢？ 希望能盡快得到幫助。謝謝。 這是一個例子：
。*{
字體大小。50px;
}
.container a{
position: relative;
float:left。
font-family: 'Montserrat', sans-serif;
font-weight: bold;
margin-left: 5%;
padding-right: 10px;
}
.child{
position: relative;
float:left;
display: none;
padding-left: 10px;
font-weight: bold;
}
.container:hover > .child{
transition: .4s;
color:#F0C930;
border-left: 4px solid #F0C930;
animation: effect .5s;
display:block。
}
@keyframes effect{
from{
position: relative;
padding-left: 0px;
opacity: 0; }
to{
position:相對。
padding-left: 10px;
opacity:1;
}
}
}< p>over over "Word"</p>
<div class="container">
<a>Word</a>/span>
<div class="child"/span>> Word</div>/span>
</div>uj5u.com熱心網友回復：
使用CSS transition來處理不透明度和填充。
CSS過渡
span class="hljs-selector-class">.container {
display: flex;
字體大小。50px;
cursor: pointer;
}
.container .child {
transition: opacity .5s, padding .5s;
border-left: 4px solid #F0C930;
opacity: 0;
margin-left: 20px;
color: #F0C930。
}
.container:hover .child{
opacity: 1;
padding-left: 20px;
}<div class="container"> /span>
<a>Word</a>/span>
<div class="child"/span>> Word</div>/span>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/330563.html
標籤：