如何让我的 CSS 文本标题淡入淡出？

Posted 2023-03-06

【中文标题】如何让我的 CSS 文本标题淡入淡出？

【英文标题】：How can I make my CSS text captions fade in and fade out?

【发布时间】：2017-04-04 18:12:03

【问题描述】：

我一直在尝试使用 html 和 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>

【问题讨论】：

CSS 动画是你的朋友。 ***.com/questions/8449933/…

使用不透明度和过渡

***.com/questions/3331353/…

【参考方案1】：

你可以把你当前的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