如何讓我的CSS文字標題淡入淡出？

我一直在試圖與HTML和CSS的圖像地圖，在圖像的某一部分和文字說明用戶滾過彈出。我想我已經快到了，但是我希望文本標題能夠淡入淡出，而不僅僅是出現和消失。請有人指出我正確的方向嗎？這裏是我的代碼至今：如何讓我的CSS文字標題淡入淡出？

#map { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 400px; 
 
    height: 250px; 
 
    background: #000; 
 
    font-family: 'Lato', Calibri, Arial, sans-serif; 
 
    font-size: 10pt; 
 
    font-weight: 700; 
 
    line-height: 18px; 
 
} 
 
#map h1 { 
 
    margin: 0px; 
 
    padding-bottom: 5px; 
 
    color: #fff; 
 
    font-size: 12pt; 
 
    font-weight: 700; 
 
} 
 
#map li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
#map li a { 
 
    position: absolute; 
 
    display: block; 
 
    background: url(images/blank.gif); 
 
    text-decoration: none; 
 
    color: #ed4e6e; 
 

 

 
} 
 
#map li a span { 
 
    display: none; 
 

 
} 
 
#map li a:hover span { 
 
    position: relative; 
 
    display: block; 
 
    width: 200px; 
 
    left: 20px; 
 
    top: 20px; 
 
    border: 0px solid #000; 
 
    border-radius: 5px; 
 
    background: #2c3f52; 
 
    padding: 20px; 
 

 
} 
 
#map a.caption1 { 
 
    top: 80px; left: 60px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ff0035; 
 
} 
 
#map a.caption2 { 
 
    top: 80px; 
 
    left: 190px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ff0035; 
 

 
} 
 
#map a.caption3 { 
 
    top: 180px; 
 
    left: 60px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ff0035; 
 
} 
 
#map a.caption4 { 
 
    top: 170px; 
 
    left: 250px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ff0035; 
 
} 
 
#map a.caption5 { 
 
    top: 90px; 
 
    left: 365px; 
 
    width: 10px; 
 
    height: 10px; 
 
    background: #ff0035; 
 
}

<ul id="map"> 
 
    <li><a class="caption1" href="#" title=""><span> 
 
    <h1>Caption 1</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span></a></li> 
 
    <li><a class="caption2" href="#" title=""><span> 
 
    <h1>Caption 2</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li> 
 
    <li><a class="caption3" href="#" title=""><span> 
 
    <h1>Caption 3</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li> 
 
    <li><a class="caption4" href="#" title=""><span> 
 
    <h1>Caption 4</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li> 
 
    <li><a class="caption5" href="#" title=""><span> 
 
    <h1>Caption 5</h1> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></a></li> 
 
</ul>

來源

2016-11-21 noon303

CSS動畫這裏你的朋友。 http://stackoverflow.com/questions/8449933/animation-css3-display-opacity – DBS

使用的不透明性和過渡 – pol

http://stackoverflow.com/questions/3331353/transitions-on-the-display-property –

你可以改變你目前的CSS這個

#map li a span { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s, opacity 0.5s linear; 
} 

#map li a:hover span { 
    position: relative; 
    width: 200px; 
    display: block; 
    z-index: 10; 
    visibility: visible; 
    opacity: 1; 
    left: 20px; 
    top: 20px; 
    border: 0px solid #000; 
    border-radius: 5px; 
    background: #2c3f52; 
    padding: 20px; 
}

小提琴：http://codepen.io/hunzaboy/pen/mOWOqa

來源

2016-11-21 11:30:06 Aslam

非常感謝你多:) – noon303

如何讓我的CSS文字標題淡入淡出？

回答

相關問題