play_bar.png
如果做出如上图中左边的那个小喇叭呢，其实只需要简单布局和css样式即可。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
html {
font-size:100px;
}
/*语音条*/
/*语音三条杠*/
/* 父级元素必须为speech_bar */
.speech_bar{
position:relative;
}
.speaker_wrapper {
position: absolute;
top: 50%;
left: .06rem;
width: .2rem;
height: .2rem;
margin-top: -.1rem;
}
.speaker1 {
width: .2rem;
height: .2rem;
border: 1px solid;
border-radius: 50%;
opacity: 1;
}
.speaker2 {
position: absolute;
top: 50%;
left: 50%;
width: .14rem;
height: .14rem;
margin: -.07rem 0 0 -.07rem;
border: 1px solid;
border-radius: 50%;
opacity: 1;
}
.speaker3 {
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
margin: -3px 0 0 -3px;
border: 1px solid;
border-radius: 50%;
}
.speech_bar .speaker1,.speech_bar .speaker2,.speech_bar .speaker3{
border-color: transparent #fff transparent transparent;
}
.pressed .speaker1{
-webkit-animation: speaker1 1.2s ease-in-out infinite;
/*-webkit-animation-play-state: paused;*/
}
.pressed .speaker2 {
-webkit-animation: speaker2 1.2s ease-in-out infinite;
/* -webkit-animation-play-state: paused; */
}
@-webkit-keyframes speaker1{
0%{
opacity: 0;
}
70%,100%{
opacity: 1;
}
}
@-webkit-keyframes speaker2{
0%{
opacity: 0;
}
20%,100%{
opacity: 1;
}
}
.play_bar{
width:1.85rem;height:0.4rem;background:#2eb3e8;border-radius:8px;line-height: 0.4rem;text-align: center;color:#fff;font-size: 0.16rem;
}
</style>
</head>
<body>
<div class="play_bar">
<div class="speech_bar pressed"><!--点击添加pressed喇叭即可波动 不想波动删除即可-->
<p>免费试听<audio></audio></p>
<div class="speaker_wrapper">
<div class="speaker1"></div>
<div class="speaker2"></div>
<div class="speaker3"></div>
</div>
</div>
</div>
</body>
</html>
网友评论