Question

您好我正在使用HTML5音频元素，但我遇到了转换问题。现在我有一个音乐图标，当光标悬停在它上面时，它会立即显示整个音频播放器。我想要它做的是通过CSS过渡慢慢显示整个音频播放器。这可能吗？

.header {
  float: left;
  width: 100%;
  margin: 10px 0px 10px 0px;
}
.heading {
  font-family: tahoma, sans-serif;
  font-size: 20px;
  display: inline;
}
.hide {
  display: none;
}
.player {
  width: 0px;
  -webkit-transition: width 2s;
}
.show:hover .hide {
  display: inline;
  width: 195px;
}

<div class="header">
  <p class="heading">Heading</p>
  <div class="show pull-right">
    <i class="fa fa-music fa-2x" aria-hidden="true"></i>
    <span class="player">
 			<audio
 				id="audioPlayer" 
 				class="hide" 
 				autoplay="true" 
 				controls="true" 
 				src="">
			</audio>
			</span>
  </div>
</div>

Answer 1

没有测试过，但我想这应该可行：

 .hide {
    width: 0px;
   -webkit-transition: width 2s;   
 }

 .show:hover .hide {
    width: 195px;
    -webkit-transition: width 2s;
 }

这是你需要的吗？

Answer 2

您还可以使用transition加上transform来获得一些光滑效果

.header {
  float: left;
  width: 100%;
  margin: 10px 0px 10px 0px;
}
.heading {
  font-family: tahoma, sans-serif;
  font-size: 20px;
  display: inline;
}
.hide {
  transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -o-transform: scale(0, 0);
  transition: all 0.5s;
}
.player {
  width: 0px;
  -webkit-transition: width 2s;
}
.show:hover .hide {
  display: inline;
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  -o-transform: scale(1, 1);
  width: 195px;
}

<div class="header">
  <p class="heading">Heading</p>
  <div class="show pull-right">
    <i class="fa fa-music fa-2x" aria-hidden="true">Hover here</i>
    <span class="player">
        <audio id="audioPlayer" class="hide" autoplay="true" controls="true" src="http://upload.wikimedia.org/wikipedia/commons/c/c8/Example.ogg">
        </audio>
        </span>
  </div>
</div>

CSS3音频播放器转换

2 个答案: