CSS基础测试6

Question

CSS基础测试6

Opened this issue 5 years ago · 21 comments

本期题目如下：

原图素材（只要关心浅色部分）：

请附上对应的HTML代码和CSS代码，注意缩进和代码高亮，可以使用下面语法：

```html
你的代码在这里
```

```css
你的代码在这里
```

请提供在线的可访问的demo地址（精力有限，没有demo减1分），如jsbin.com、jsfiddle.net或codepen.io，使用国内的类似工具也可以。

本期小测答疑周六5月18日上午10:00开始，大约半小时，直播地址：https://live.bilibili.com/21193211

首位答题者会额外2积分，同时会被翻牌。

感谢您的参与！

Answer 1 · 2019-05-15T12:50:54.000Z

写之前翻看了下 Chrome 原生 <audio> 的 shadow DOM，有所启发。 > 在线 DEMO <

<div class="audio-controls">
  <div class="audio-controls-inner">
    <button class="audio-controls-button" aria-label="play"></button>
    <span class="audio-controls-time" aria-label="current">0:05</span>
    <span class="audio-controls-time" aria-label="remaining">0:05</span>
    <input class="audio-controls-timeline" type="range" step="60" max="5000" value="5000">
    <button class="audio-controls-button" aria-label="volume">
      <span class="audio-controls-button-volume-icon"><i></i></span>
    </button>
    <button class="audio-controls-button" aria-label="menu"></button>
  </div>		
</div>

body { background: #d6d6d6; }

/********** 主容器 **********/
.audio-controls {   
  /* width: 400px; */
  text-align: left;
}

/********** 样式容器 **********/
.audio-controls-inner {
  font-size: 16px;      /* 控件尺寸 */
  color: #000;          /* 控件主题色 */
  background: #f1f3f4;  /* 控件背景色 */

  display: flex;
  align-items: center;
  min-width: 2.125em;
  height: 3.375em;
  padding: 0 .625em;
  overflow: hidden;
  border-radius: 2.125em;
}

/********** 组件按钮公用样式 **********/
.audio-controls-button {
  flex: 0 0 2em;
  height: 2em;
  padding: 0;
  overflow: hidden;
  font-size: 100%;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 2.25em;
  cursor: pointer;
  transition: background ease-in-out .2s;
}
.audio-controls-button:hover { background: rgba(0,0,0,.06); }
.audio-controls-button::before {
  display: inline-block;
  content: "";
}

/********** 播放按钮 **********/
.audio-controls-button[aria-label="play"]::before {
  transform: translate(30%, .16em);
  border: solid transparent;
  border-width: .55em .65em;
  border-left-color: currentColor;
}

/********** 暂停按钮 **********/
.audio-controls-button[aria-label="pause"]::before {
  width: .375em;
  height: 48%;
  transform: translateY(.16em);
  text-align: center;
  border: solid currentColor;
  border-width: 0 .25em;
}

/********** 声音按钮 **********/
.audio-controls-button[aria-label="volume"] {
  margin-left: 1em;
  margin-right: .25em;
}
.audio-controls-button[aria-label="volume"]::before { display: none; }

/* 声音按钮图标 */
.audio-controls-button-volume-icon {
  display: inline-block;
  padding: .3em .15em;
  margin-left: -.3em;
  transform: translate(-50%, .15em);
  border: .3em solid transparent;
  border-right-color: currentColor;
  box-shadow: inset 1em 0 0;
}
.audio-controls-button-volume-icon > i {
  position: relative;
  left: calc(.3125em * 2);
}
.audio-controls-button-volume-icon > i::before {
  content: "";
  position: absolute;
  width: .7em;
  height: 1.4em;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: .16em solid;
  border-left: 0;
  border-radius: 0 .7em .7em 0;
}
.audio-controls-button-volume-icon > i::after {
  content: "";
  position: absolute;
  width: .3em;
  height: .6em;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 0 .3em .3em 0;
}

/********** 选项菜单 **********/
.audio-controls-button[aria-label="menu"]::before  {
  width: .3125em;
  height: .3125em;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 .5em 0, 0 -.5em 0;
}

/********** 播放时间文本 **********/
.audio-controls-time {
  font-size: .875em;
  line-height: 1;
  opacity: .85;
}
.audio-controls-time[aria-label="current"] {
  margin-left: .375em;
}
.audio-controls-time[aria-label="remaining"]::before {
  content: "/";
  margin: 0 .25em;
}

/********** 时间轴 **********/
.audio-controls-timeline {
  -webkit-appearance: none;
  flex: 1;
  height: .25em;
  margin-left: 1em;
  font-size: 100%;
  color: inherit;
  background: currentColor;
  border-radius: .25em;
  mix-blend-mode: darken;
}
.audio-controls-timeline::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0;
  height: 0;
  border: .375em solid;
  border-radius: 50%;
  box-shadow: 50vw 0 0 50vw rgba(255,255,255,.5);
}

Answer 2 · 2019-05-15T13:19:10.000Z

在线demo

<div class="audio-wrap">
        <a class="audio-play" href="javascript:" title="播放/暂停"></a>
        <span class="audio-now" title="当前时刻">0:05</span><span class="audio-timeAll" title="时长">0:05</span>
        <input class="audio-progressbar" type="range" title="时间进度">
        <a class="audio-volume" href="javascript:" title="音量"></a>
        <a class="audio-menu" href="javascript:" title="菜单"></a>
    </div>

.audio-wrap{
    height: 56px;
    display: inline-block;
    border-radius: 28px;
    background: var(--Secondary);
    --Primary:black;
    --Secondary:#f1f3f4;
    line-height: 56px;
    padding: 0 28px;
    word-spacing: 0.5em;
    white-space:nowrap;
}
/* audio-play */
.audio-play{
    display: inline-block;
    border: 7px solid var(--Primary);
    border-right: 0;
    border-top-color: transparent;
    border-bottom-color: transparent;
    box-sizing: border-box;
    border-left-width: 11px;
}

.audio-now::after{
    content:' / ';
    word-spacing: 0;
}

/* audio-progressbar */
.audio-progressbar{
    -webkit-appearance: none;
    outline: 0;
    border-radius: var(--x1);
    cursor: ew-resize;
    height: 4px;
    background: var(--Primary);
    vertical-align: middle;
}

.audio-progressbar::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    border-radius: 50%;
    height: 12px;
}

.audio-progressbar::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 0;
    width: 0;
    border-radius: 50%;
    border: 6px solid var(--Primary);
}
/* audio-volume */
.audio-volume{
    display: inline-block;
}
.audio-volume::after{
    content:"";
    display: inline-block;
    width: 4px;
    height: 6px;
    background: var(--Primary);
    border: 5px solid var(--Secondary);
    border-right-color: var(--Primary);
    vertical-align: middle;
}
.audio-volume::before{
    content:"";
    display: inline-block;
    background: var(--Primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    position: absolute;
    margin: 20px 0 0 7px;
    clip-path: inset(0% 0% 0% 50%);
    box-shadow: 0 0 0 2px var(--Primary) inset, 0 0 0 5px #f1f1f1 inset;
}
/* audio-menu */
.audio-menu{
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--Primary);
    vertical-align: middle;
    margin-left: 21px;
}
.audio-menu::before,.audio-menu::after{
    content: "";
    display: inline-block;
    width:4px;
    height: 4px;
    background: var(--Primary);
    position: absolute;
}
.audio-menu::before{
    margin-top:-6px;
}
.audio-menu::after{
    margin-top:6px;
}

Answer 3 · 2019-05-15T13:40:08.000Z

jsbin

<div class="audio">
  <div class="audio-inner">
    <i class="audio__start"></i>
    <i class="audio__progress">
      <i>0.05</i>
      <i>/</i>
      <i>0.05</i>
    </i>
    <i class="audio__volume-size">
      <i class="audio__volume-size__line"></i>
      <i class="audio__volume-size__handler"></i>
    </i>
    <i class="audio__horn">
      <i class="audio__horn-start"></i>
      <i class="audio__horn-middle"></i>
      <i class="audio__horn-end"></i>
    </i>
    <i class="audio__more">
      <i class="audio__more__circle"></i>
    </i>
  </div>
</div>

.audio {
  --iconSize: 5vw;
  --iconBg: #000;
  padding:calc( .5 * var(--iconSize));
  background: #d6d6d6;
}

.audio-inner {
  height: calc( 2 * var(--iconSize));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: var(--iconSize);
  background:#f1f3f4;
}

.audio__start {
  border-left: calc(.8 * var(--iconSize)) solid var(--iconBg);
  border-top: calc(.5 * var(--iconSize)) solid transparent;
  border-bottom: calc(.5 * var(--iconSize)) solid transparent;
}

.audio__progress {
  font-size: calc(.5 * var(--iconSize));
  color:#797a7b;
}

.audio__volume-size {
  position: relative;
  display: flex;
  align-items: center;
}

.audio__volume-size__line {
  height: calc(.2 * var(--iconSize));
  width: calc(5 * var(--iconSize));
  background: var(--iconBg);
}

.audio__volume-size__handler {
  height: calc(.5 * var(--iconSize));
  width: calc(.5 * var(--iconSize));
  position: absolute;
  right: 0;
  background: var(--iconBg);
  border-radius: 50%;
}

.audio__horn {
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.audio__horn-start {
  width: calc(.5 * var(--iconSize));
  height: calc(.5 * var(--iconSize));
  margin-right: calc(-.5 * var(--iconSize));
  background: var(--iconBg);
}

.audio__horn-middle {
  border-style: solid;
  border-color: transparent var(--iconBg) transparent transparent;
  border-top-width: calc(.5 * var(--iconSize));
  border-right-width: calc(.5 * var(--iconSize));
  border-bottom-width: calc(.5 * var(--iconSize));
}

.audio__horn-end {
  box-sizing: border-box;
  width: var(--iconSize);
  height: var(--iconSize);
  margin-left: calc(-.4 * var(--iconSize));
  border: calc(.1 * var(--iconSize)) solid var(--iconBg);
  padding: calc(.15 * var(--iconSize));
  background-color: var(--iconBg);
  background-clip: content-box;
  border-radius: 50%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.audio__more {
  box-sizing: border-box;
  height: var(--iconSize);
  width: calc(.3 * var(--iconSize));
  border-top: var(--iconBg) calc(.2 * var(--iconSize)) dotted;
  border-bottom: var(--iconBg) calc(.2 * var(--iconSize)) dotted;
  display: flex;
  align-items: center;
}

.audio__more__circle {
  height: calc(.2 * var(--iconSize));
  width: calc(.2 * var(--iconSize));
  background-color: var(--iconBg);
  border-radius: 50%;
}

Answer 4 · 2019-05-15T13:43:26.000Z

demo

<div class="audio" style="color:red">
    <button class="audio-button">
        <i class="icon" name="play"></i>
    </button>
    <span class="audio-current-time">0:01</span>
    <span class="audio-duration-time">/ 0:05</span>
    <div class="audio-controls" style="--percent:20">
        <button class="audio-controls-track"></button>
        <button class="audio-controls-thumb" data-title></button>
    </div>
    <button class="audio-button">
        <i class="icon" name="volumn"></i>
    </button>
    <button class="audio-button">
        <i class="icon" name="menu"></i>
    </button>
</div>

.audio{
    box-sizing: border-box;
    display: flex;
    padding: 0 10px;
    border-radius: 100px;
    align-items: center;
    min-width: 320px;
    min-height: 54px;
    background: rgb(241, 243, 244);
    color: #000000;
    font-size: 16px;
}
.audio-button{
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    background: none;
    outline: 0;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
}
.audio-button:active{
    background: rgba(0,0,0,.1)
}
.icon{
    display: inline-block;
    font-size: 1.2em;
}
.audio-current-time,.audio-duration-time{
    margin-left: 5px;
    opacity: 0.87;
}
.audio-controls {
    position: relative;
    flex: 1;
    padding: 4px 0;
    margin: 15px;
    --percent: 0;
    outline:0;
    color: inherit;
}

.audio-controls-track {
    display: block;
    width: 100%;
    height: 4px;
    background-color: rgb(196, 196, 196);
    border: 0;
    padding: 0;
    outline:0;
    color: inherit;
}

.audio-controls-track::before {
    content: '';
    display: block;
    height: 100%;
    opacity: .87;
    background-color: currentColor;
    width: calc(1% * var(--percent));
}

.audio-controls-thumb {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 0;
    padding: 0;
    color: inherit;
    background: currentColor;
    opacity: .87;
    border-radius: 50%;
    left: calc(1% * var(--percent));
    top: 0;
    margin: auto -6px;
    outline:0;
    transition:all .15s .15s, left 0s 0s;
    cursor: pointer;
}
.icon[name="play"]{
    width: 0;
    height: 0;
    margin-left: .2em;
    border-width: .4375em 0 .4375em .6875em;
    border-style: solid;
    border-color: transparent transparent transparent currentColor;
}
.icon[name="volumn"]{
    position: relative;
    width: 1.125em;
    height: 1.125em;
}
.icon[name="volumn"]::before{
    content: '';
    width: 0.25em;
    height: 0.375em;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-width: 0.3125em 0.3125em 0.3125em 0;
    border-style: solid;
    background: currentColor;
    background-clip: content-box;
    border-color: transparent currentColor transparent transparent;
}
.icon[name="volumn"]::after{
    content: '';
    width: 0.625em;
    height: 0.625em;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 0.125em solid;
    padding: 0.125em;
    background: currentColor;
    background-clip: content-box;
    clip: rect(0,1.125em,1.125em,0.625em)
}
.icon[name="menu"]{
    position: relative;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 -.4em 0 0 currentColor,0 .4em 0 0 currentColor
}

当然，没有什么是css渐变生成不了的，试着实现了一下

/**css gradient 生成**/
.icon2[name="volume"]{
    background-image: linear-gradient(to right,currentColor,currentColor),linear-gradient(135deg,transparent 50%,currentColor 0),linear-gradient(45deg,transparent 50%,currentColor 0),radial-gradient( circle at -0.125em center,currentColor 0.3125em, transparent,0,transparent,0.4375em,currentColor 0,currentColor 0.5625em,transparent 0);
    background-size:0.5625em 0.375em, 0.3125em 0.3125em, 0.3125em 0.3125em, 0.4375em 1.25em;
    background-repeat: no-repeat;
    background-position: 0.0625em center, 0.3125em 0.125em,left 0.3125em bottom 0.125em, right 0.0625em center;
}

右侧为渐变生成

很明显，实现成本高，效果也不理想（有锯齿）

Answer 5 · 2019-05-15T14:50:48.000Z

demo

<div class="player">
	<div class="play-button"></div>
	<div class="time">00:00 / 00:05</div>
	<div class="process">
		<div class="process-button"></div>
	</div>
	<div class="voice">
		<div class="left"></div>
		<div class="right"></div>
	</div>
	<div class="more"><i></i><i></i><i></i></div>
</div>

body {
	background: #d6d6d6;
}

.player {
	width: 100%;
	min-width: 290px;
	height: 50px;
	display: flex;
	padding: 0 20px;
	background: #f1f3f4;
	border-radius: 9999px;
	align-items: center;
	box-sizing: border-box;
}

.play-button {
	border-left: 14px solid #000;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
}

.time {
	color: #8e8f90;
	margin: 0 12px;
}

.process {
	position: relative;
	background: #000;
	height: 5px;
	flex: 1;
}

.process-button {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 12px;
	width: 12px;
	background: #0c0c0c;
	border-radius: 50%;
}

.voice {
	margin-left: 30px;
	display: flex;
	align-items: center;
}

.voice .left {
	position: relative;
	width: 12px;
	height: 12px;
	background: #0c0c0c;
}

.voice .left::before {
	position: absolute;
	content: ' ';
	left: 0;
	top: 50%;
	transform: translateY( -50%);
	border-top: 12px solid transparent;
	border-right: 16px solid #000;
	border-bottom: 12px solid transparent;
}

.voice .right {
	position: relative;
	width: 12px;
	height: 24px;
	margin-left: 8px;
	overflow: hidden;
	box-sizing: border-box;
}


.voice .right::after {
	content: ' ';
	position: absolute;
	left: -100%;
	right: 0;
	top: 0;
	bottom: 0;
	border-radius: 50%;
	background: #000;
	z-index: 10;
}

.voice .right::before {
	position: absolute;
	content: ' ';
	width: 15px;
	height: 15px;
	top: 50%;
	left: 0;
	background: transparent;
	transform: translate(-50%, -50%);
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	z-index: 20;
}

.more {
	margin-left: 20px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.more i{
	background: #000000;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
}

Answer 6 · 2019-05-15T15:37:47.000Z

Demo:
https://codepen.io/crazyboy/pen/WBpeyB

<div class="audio">
	<div class="audio-start"></div>
	<div class="audio-time">0:05&#160;/&#160;0:05</div>
	<div class="audio-slider">
		<div class="audio-slider-track"></div>
		<div class="audio-slider-thumb"></div>
	</div>
	<div class="audio-volume">
		<div class="audio-volume-left"></div>
		<div class="audio-volume-right"></div>
	</div>
	<div class="audio-more">
		<div></div>
		<div></div>
		<div></div>
	</div>
</div>

.audio {
	display: inline-flex;
	justify-content: space-around;
	align-items: center;
	width: 300px;
	height: 54px;
	border-radius: 27px;
	background-color: #f1f3f4;
	padding: 0 10px;
}
.audio-start {
	cursor: pointer;
	border-top: 6px solid transparent;
	border-left: 10.392px solid;
	border-bottom: 6px solid transparent;
}
.audio-time {
	font-size: 14px;
	color: #202021;
}
.audio-slider {
	position: relative;
	width: 120px;
}
.audio-slider-track {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background-color: #000000;
}
.audio-slider-thumb {
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #000000;
}
.audio-volume {
	cursor: pointer;
}
.audio-volume-left {
	display: inline-block;
	float: left;
	border-top: 5px solid transparent;
	border-right: 5px solid;
	border-bottom: 5px solid transparent;
}
.audio-volume-left::before {
	content: '';
	display: block;
	width: 4px;
	height: 6px;
	background-color: #000000;
}
.audio-volume-right {
	display: inline-block;
	float: left;
	width: 5px;
	height: 10px;
	margin-top: -1px;
	border: 2px solid;
	padding: 2px 2px 2px 0;
	border-left: 0;
	background-clip: content-box;
	background-color: #000000;
	border-radius: 0 10px 10px 0;
}
.audio-volume-right::after {
	content: '';
	margin-top: -4px;
	display: block;
	height: 18px;
	width: 2px;
	background-color: #f1f3f4;
}
.audio-more {
	height: 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	cursor: pointer;
}
.audio-more>div {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: #000000;
}

Answer 7 · 2019-05-15T16:06:41.000Z

在线demo

    <div class="player">
        <div class="box">
            <div class="play-btn"></div>
            <div class="time">
                <span>0:05 / 0:05</span>
            </div>
            <div class="slider">
                <button class="slider-track"></button>
                <button class="slider-thumb"></button>
            </div>
            <div class="sound">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="menu">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </div>

        html {
            font-size: 16px;
        }

        @media screen and (min-width: 375px) {
            html {
                /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
                font-size: calc(100% + 2 * (100vw - 375px) / 39);
                font-size: calc(16px + 2 * (100vw - 375px) / 39);
            }
        }
        @media screen and (min-width: 414px) {
            html {
                /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
                font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
                font-size: calc(18px + 4 * (100vw - 414px) / 586);
            }
        }
        @media screen and (min-width: 600px) {
            html {
                /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
                font-size: calc(125% + 4 * (100vw - 600px) / 400);
                font-size: calc(20px + 4 * (100vw - 600px) / 400);
            }
        }
        @media screen and (min-width: 1000px) {
            html {
                /* 1000px往后是每100像素0.5px增加 */
                font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
                font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
            }
        }
        .player{
            position: relative;
            width: 80%;
            height: 2rem;
            margin: auto;
            background-color: #d1d1d1;
        }
        .box{
            display: flex;
            position: absolute;
            width: 95%;
            height: 70%;
            background-color: #eff1f2;
            border-radius: .5rem;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            align-items: center;
            justify-content: space-around;
        }
        .box > div{
            cursor: pointer;
        }
        .play-btn{
            width: 0;
            height: 0;
            border-left: .8rem solid black;
            border-top: .4rem solid transparent;
            border-bottom: .4rem solid transparent;
        }
        .sound{
            position: relative;
        }
        .sound > div{
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .sound > div:nth-child(1){
            width: .4rem;
            height: .4rem;
            background-color: #000;
        }
        .sound > div:nth-child(2){
            width: 0;
            height: 0;
            border-right: .8rem solid black;
            border-top: .4rem solid transparent;
            border-bottom: .4rem solid transparent;
        }
        .sound > div:nth-child(3){
            width: .2rem;
            height: .2rem;
            left: .75rem;
            border: .1rem solid black;
            border-left: none;
            border-radius: 50%;
        }
        .sound > div:nth-child(4){
            width: .4rem;
            height: .4rem;
            left: .75rem;
            border: .1rem solid black;
            border-left: none;
            border-radius: 50%;
            padding: .06rem;
        }
        .menu span{
            display: block;
            width: .15rem;
            height: .15rem;
            border-radius: 50%;
            background-color: #000;
            margin: .1rem 0;
        }
        .slider {
            width: 30%;
            padding: .2rem 0;
            position: relative;
            margin: 1rem 0;
            --percent: 100;
        }

        .slider-track {
            display: block;
            width: 100%;
            height: .3rem;
            background-color: lightgray;
            border: 0;
            padding: 0;
        }

        .slider-track::before {
            content: '';
            display: block;
            height: 100%;
            background-color: black;
            width: calc(1% * var(--percent));
        }

        .slider-thumb {
            position: absolute;
            width: .7rem;
            height: .7rem;
            border: 0;
            padding: 0;
            background: #000;
            box-shadow: 0 0 0 .1rem black;
            border-radius: 50%;
            left: calc(1% * var(--percent));
            top: 0;
            margin: auto -0.1rem;
        }

Answer 8 · 2019-05-16T01:09:23.000Z

demo

<div class="audio">
            <div class="audio-play"></div>
            <span class="audio-time">0:00/4:42</span>
            <div class="audio-progress"></div>
            <div class="audio-volume"></div>
            <div class="audio-more">
                <span class="audio-more-content"></span>
            </div>
        </div>

.audio{
            background-color: #F1F3F4;
            height: 54px;
            width:300px;
            margin:0 auto;
            border-radius: 30px;
            display: flex;
            align-items: center;
            justify-content: space-around;
        }
        .audio-time{
            color:#666
        }
        .audio-play{
            display: inline-block;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 16px solid black;
            width: 0;
            height: 0;
        }

        .audio-progress{
            width: 30%;
            height: 5px;
            background: grey;
            position: relative;
            border-radius: 2px
        }
        .audio-progress::before{
            content: "";
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: black;
            position: absolute;
            top:0;
            left:-4px;
            transform: translateY(-30%)
        }
        .audio-volume{
            display: inline-block;
            border:6px solid black;
            border-top-color: #F1F3F4;
            border-left-color: #F1F3F4;
            border-bottom-color: #F1F3F4;
            width: 6px;
            height: 6px;
            background: black;
            position: relative;
        }
        .audio-volume::before{
            content: "";
            display: inline-block;
            position: absolute;
            top:-8px;
            left:14px;
            width: 3px;
            height: 10px;
            padding:3px 3px 3px 0;
            border:3px solid black;
            background-color: black;
            background-clip: content-box;
            border-left: 0;
            border-radius: 0 12px  12px 0
        }    
        
        .audio-more{
            width: 5px;
            height: 10px;
            border-top: 5px solid black;
            border-bottom: 5px solid black;
            display: flex;
            align-items: center
        }
        .audio-more-content{
            width: 5px;
            height: 5px;
            background-color: black;
        }

Answer 9 · 2019-05-16T05:13:44.000Z

demo

<div class="audio-player">
  <div aria-label="音频正在缓冲" style="display:none;"></div>

  <div class="operate-box">
    <div class="player-button play" aria-label="播放"></div>

    <div class="player-time current-time" aria-label="已播放时间：1:00">1:00</div>
    <div class="player-time all-time" aria-label="总时间：2:00">2:00</div>

    <div class="player-timeline" aria-label="播放进度：50%">
      <span class="loading" style="--loadingpercent: 100;"></span>
      <div class="range" style="--timepercent: 50;">
        <span class="btn"></span>
      </div>
    </div>

    <div class="player-button mute" aria-label="静音">
      <span class="left"></span>
      <span class="right"></span>
    </div>

    <div class="player-button more">
      <i></i>
      <i></i>
      <i></i>
    </div>

  </div>
</div>

.operate-box {
  height: 54px;
  line-height: 54px;
  max-width: 50%;
  min-width: 250px;
  margin: 0 auto;
  background-color: #F1F3F4;
  border-radius: 27px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  box-sizing: border-box;
}

.player-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player-button:hover {
  background-color: #DADBDC;
}

.player-button.play::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #000;
  margin: auto;
}

.player-button.mute span {
  display: block;
}

.player-button.mute .left {
  width: 4px;
  height: 6px;
  background-color: #000;
  background-clip: content-box;
  border-style: solid;
  border-width: 5px 5px 5px 0;
  border-color: transparent #000 transparent #000;
}

.player-button.mute .right {
  margin-left: 2px;
  width: 18px;
  width: 7px;
  height: 18px;
  position: relative;
  overflow: hidden;
}

.player-button.mute .right::before, .player-button.mute .right::after {
  content: "";
  position: absolute;
  top: 50%;
  display: block;
  transform: translate(0, -50%);
  border-radius: 50%;
}

.player-button.mute .right::before {
  right: 0;
  width: 17px;
  height: 17px;
  border: 2px solid #000;
}

.player-button.mute .right::after {
  right: 4px;
  width: 8px;
  height: 8px;
  background-color: #000;
}

.player-button.more {
  flex-direction: column;
}

.player-button.more i {
  width: 4px;
  height: 4px;
  background: #000;
  border-radius: 50%;
}

.player-button.more i + i {
  margin-top: 2px;
}

.player-time {
  font-size: 14px;
}

.player-time.current-time {
  margin-left: 5px;
}

.player-time.all-time::before {
  content: "/";
  padding: 0 3px;
}

.player-timeline {
  flex: 1;
  height: 4px;
  margin: 0 23px 0 16px;
  background-color: #C1C2C3;
  border-radius: 2px;
  position: relative;
}

.player-timeline .loading {
  position: absolute;
  height: 100%;
  width: calc(1% * var(--loadingpercent));
  background-color: #595959;
  border-radius: 2px;
  left: 0;
  top: 0;
}

.player-timeline .range {
  height: 100%;
  width: calc((100% - 12px) * var(--timepercent) / 100);
  background-color: #191919;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 2px;
}

.player-timeline .range .btn {
  display: block;
  width: 12px;
  height: 12px;
  background-color: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
}

Answer 10 · 2019-05-16T05:57:53.000Z

在线 demo

<div class="wrapper">
  <div class="audio">
    <div class="audio-play"></div>
    <div class="audio-time">
      <span>0:05</span> / <span>0:05</span>
    </div>
    <div class="audio-control">
      <input type="range">
    </div>
    <div class="audio-sound">
      <span class="audio-sound-one"></span>
      <span class="audio-sound-two"></span>
    </div>
    <div class="audio-setting"></div>
  </div>
</div>

.wrapper {
  padding: 9px 5px;
  background-color: #d6d6d6;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.wrapper .audio {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 20px 0;
  min-width: 282px;
  min-height: 54px;
  background-color: #f1f3f4;
  border-radius: 45px;
  display: flex;
  align-items: center;
}
.wrapper .audio .audio-play {
  width: 0px;
  height: 0;
  display: inline-block;
  margin-left: 22px;
  border-left: 10px solid #000;
  border-right: 10px solid transparent;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
}
.wrapper .audio .audio-time {
  font-size: 14px;
  color: #333;
  margin-right: 16px;
  flex-shrink: 1;
  white-space: nowrap;
}
.wrapper .audio .audio-control {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.wrapper .audio .audio-control > input {
  -webkit-appearance: none;
  width: 100%;
  min-width: 60px;
  background-color: #000;
  height: 4px;
  border-radius: 5px;
}
.wrapper .audio .audio-control > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background-color: #000;
  border-radius: 50%;
}
.wrapper .audio .audio-sound {
  display: flex;
  align-items: center;
  min-width: 18px;
  min-height: 18px;
  margin-right: 50px;
  margin-left: 20px;
}
.wrapper .audio .audio-sound .audio-sound-one {
  width: 0px;
  height: 0;
  display: inline-block;
  position: relative;
  border-left: 6px solid transparent;
  border-right: 6px solid #000;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
}
.wrapper .audio .audio-sound .audio-sound-one::after {
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #000;
  content: '';
  transform: translate(-50%, -50%);
}
.wrapper .audio .audio-sound .audio-sound-two {
  width: 0px;
  height: 18px;
  display: inline-block;
  position: relative;
  right: 15%;
  border-left: 7px solid transparent;
  border-right: 7px solid #000;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  border-radius: 50%;
}
.wrapper .audio .audio-sound .audio-sound-two::before, .wrapper .audio .audio-sound .audio-sound-two::after {
  position: absolute;
  content: '';
  display: inline-block;
  width: 0px;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  border-radius: 50%;
}
.wrapper .audio .audio-sound .audio-sound-two::before {
  height: 12px;
  border-left: 5px solid transparent;
  border-right: 5px solid white;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  z-index: 2;
}
.wrapper .audio .audio-sound .audio-sound-two::after {
  height: 8px;
  border-left: 3px solid transparent;
  border-right: 3px solid #000;
  border-bottom: 0px solid transparent;
  border-top: 0px solid transparent;
  z-index: 3;
}
.wrapper .audio .audio-setting {
  display: inline-block;
  width: 4px;
  height: 4px;
  position: absolute;
  border-radius: 1px;
  right: 24px;
  background-color: #000;
}
.wrapper .audio .audio-setting::before, .wrapper .audio .audio-setting::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 1px;
}
.wrapper .audio .audio-setting::before {
  bottom: 100%;
  margin-bottom: 2px;
}
.wrapper .audio .audio-setting::after {
  top: 100%;
  margin-top: 2px;
}

Answer 11 · 2019-05-16T09:57:11.000Z

demo

<div class="audio-container">
  <a
    href="javascript:"
    class="audio-play fl"
    title="播放"
    aria-label="播放"
    tabindex="1"
  >
    <i class="icon-play"></i>
  </a>
  <span class="audio-time fl" aria-label="总时间">
    <em aria-label="已播放时间">0:00</em> / 0:08
  </span>
  <a href="javascript:" class="audio-menu fr" aria-label="菜单" tabindex="5">
    <i class="icon-menu"></i>
  </a>
  <div class="audio-volumn-container fr">
    <a
      href="javascript:"
      class="audio-volumn"
      tabindex="4"
      aria-label="音量调节"
    >
      <i class="icon-volumn"></i>
    </a>
    <div
      class="audio-controls-slider"
      data-percent="0"
      tabindex="3"
      aria-label="音量调节"
    >
      <div class="audio-controls-slider-container">
        <button class="audio-controls-slider-track" tabindex="-1"></button>
        <button class="audio-controls-slider-thumb" tabindex="-1"></button>
      </div>
    </div>
    <div class="audio-background"></div>
  </div>

  <div
    class="audio-controls-slider"
    data-percent="0"
    tabindex="2"
    aria-label="进度条"
  >
    <div class="audio-controls-slider-container">
      <button class="audio-controls-slider-track" tabindex="-1"></button>
      <button class="audio-controls-slider-thumb" tabindex="-1"></button>
    </div>
  </div>
</div>

body {
  margin: 0;
}

.audio-container {
  position: relative;
  height: 54px;
  line-height: 54px;
  padding: 0px 10px;
  border-radius: 100px;
  font-size: 0;
  background-color: #f1f3f4;
  color: #000;
}

.fl {
  float: left;
}
.fr {
  float: right;
}

.audio-play {
  width: 30px;
  height: 54px;
}
.icon-play,
.icon-menu {
  display: block;
  height: 30px;
  margin: 10px 0 0;
  border-radius: 50%;
}
.icon-play::before {
  content: '';
  position: absolute;
  margin: 9px 0 0 10px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-left: 12px solid #000;
  border-bottom: 7px solid transparent;
}

.audio-time {
  display: inline-block;
  font-size: 14px;
  margin: 0 5px;
}
.audio-time em {
  font-style: normal;
}

.audio-controls-slider {
  display: block;
  position: relative;
  width: auto;
  height: 54px;
  vertical-align: top;
  overflow: hidden;
  --percent: 20;
  transition: width 0.3s;
}
.audio-controls-slider-container {
  position: relative;
  margin: 22px 0;
  padding: 5px 0;
  direction: ltr;
}
.audio-controls-slider-track {
  display: block;
  width: 100%;
  height: 4px;
  background-color: rgb(102, 103, 102);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.audio-controls-slider-track::before {
  content: '';
  display: block;
  height: 100%;
  background-color: #000;
  width: calc(1% * var(--percent));
}
.audio-controls-slider-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0;
  padding: 0;
  background: #000;
  border-radius: 50%;
  left: calc(1% * var(--percent));
  top: 0;
  margin: auto -5px;
  cursor: pointer;
}

.audio-volumn-container {
  position: relative;
  height: 54px;
  margin-left: 10px;
  border-radius: 30px;
  z-index: 0;
  direction: rtl;
}
.audio-background {
  position: absolute;
  top: 11px;
  right: 2px;
  width: 124px;
  height: 32px;
  border-radius: 16px;
  z-index: -1;
}
.audio-volumn-container .audio-controls-slider {
  width: 0px;
  display: inline-block;
  opacity: 0;
}
.audio-volumn {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 54px;
  overflow: hidden;
}
.icon-volumn {
  position: absolute;
  top: 22px;
  left: 6px;
  width: 3px;
  height: 5px;
  background-color: #000;
  background-clip: content-box;
  border-top: 4px solid transparent;
  border-right: 4px solid #000;
  border-bottom: 4px solid transparent;
}
.icon-volumn::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 9px;
  width: 3px;
  height: 6px;
  border-radius: 0px 3px 3px 0;
  background-color: #000;
}
.icon-volumn::after {
  content: '';
  position: absolute;
  top: -9px;
  left: -10px;
  width: 22px;
  height: 19px;
  border-radius: 50%;
  border-top: solid 2px transparent;
  border-right: solid 2px #333;
  border-bottom: solid 2px transparent;
  border-left: solid 2px transparent;
}

.audio-menu {
  width: 30px;
  height: 54px;
}
.icon-menu {
  position: relative;
  background-color: #f1f3f4;
  margin-top: 14px;
}
.icon-menu::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: 0 8px 0, 0 -8px 0;
  color: #000;
  background-color: #000;
}

.audio-play:hover .icon-play,
.audio-play:focus .icon-play,
.audio-menu:hover .icon-menu,
.audio-menu:focus .icon-menu,
.audio-volumn-container:hover .audio-background,
.audio-volumn-container .audio-controls-slider:focus ~ .audio-background,
.audio-volumn:focus ~ .audio-background {
  background-color: #e1e1e1;
}

.audio-volumn-container:hover .audio-controls-slider,
.audio-volumn-container .audio-controls-slider:focus,
.audio-volumn:focus ~ .audio-controls-slider {
  opacity: 1;
  width: 90px;
}

Answer 12 · 2019-05-16T14:24:07.000Z

demo

<div class="audio-box">
  <button class="audio-play">
     <i class="icon-audio-play"></i>
  </button>
  <span class="audio-time">0.05 / 0.05</span>
  <div class="audio-play-length"></div>
  <div class="audio-volume">
    <i class="audio-volume-left"></i>
    <i class="audio-volume-right"></i>
  </div>
  <i class="audio-more"></i>
</div>

.audio-box{
  display: flex;
  align-items: center;
  width: 600px;
  min-height: 60px;
  background-color: #f1f3f4;
  border-radius: 30px;
}
.audio-play{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  border: none;
  outline: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  background: inherit;
}
.audio-play:active{
  background: #e5e7e8;
}
.icon-audio-play{
  margin-left: 3px;
  border-left: 12px solid;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}
.audio-time{
  margin-left: 5px;
  display: inline-block;
  font-size: 14px;
  color: #202021;
}
.audio-play-length{
  position: relative;
  flex: 1;
  margin: 0 10px;
  height: 5px;
  background-color: #000;
  border-radius: 5px;
  --percent: 20;
}
.audio-play-length::before{
  content: '';
  position: absolute;
  top: 50%;
  left: calc(1% * var(--percent));
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
  z-index: 2;
}
.audio-play-length::after{
  content: '';
  position: absolute;
  left: calc(1% *var(--percent));
  width: calc(100% - 1% * var(--percent));
  height: 5px;
  background-color: #595959;
  border-radius: 0 5px 5px 0;
}
.audio-volume{
  display: flex;
  align-items: center;
  height: 30px;
}
.audio-volume-left{
  position: relative;
  width: 10px;
  height: 10px;
  background-color: #000;
}
.audio-volume-left::after{
  content: '';
  position: absolute;
  top: -5px;
  right: 8px;
  transform: translate(100%);
  border-right: 12px solid;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.audio-volume-right{
  position: relative;
  width: 9px;
  height: 30px;
  overflow: hidden;
  margin-left: 7px;
}
.audio-volume-right::before{
  content: '';
  position: absolute;
  top: 7px;
  right: 5px;
  width: 12px;
  height: 12px;
  border: 2px solid #000;
  border-radius: 50%;
}
.audio-volume-right::after{
  content: '';
  position: absolute;
  top: 3px;
  right: 1px;
  border: 2px solid;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.audio-more{
  margin-left: 8px;
  margin-right: 30px;
  position: relative;
  border: 2px solid #000;
  border-radius: 100%;
}
.audio-more::before{
  content: '';
  position: absolute;
  left: 0;
  top: -5px;
  transform: translate(-50%, -100%);
  border: 2px solid #000;
  border-radius: 100%;
  background-color: #000;
}
.audio-more::after{
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  transform: translate(-50%);
  border: 2px solid #000;
  border-radius: 100%;
}

Answer 13 · 2019-05-16T16:09:35.000Z

在线预览

    <div class="audio">
        <button class="audio-play-btn" aria-label="play and pause"></button>
        <div class="audio-time" role="timer" aria-label="show play time"><span>0:05</span><span> / </span><span>0:05</span></div>
        <div class="audio-progress" role="progressbar" aria-valuenow="100" 
        aria-valuemin="0" aria-valuemax="100">
            <button class="audio-progress-btn"></button>
        </div>
        <div class="audio-volumn" role="button" aria-label="set volumn">
            <div class="audio-horn"></div>
            <i></i>
        </div>
        <button class="audio-menu" aria-label="menu">
            <span></span><span></span><span></span>
        </button>
    </div>

    html {
        font-size: 16px;
    }

    @media screen and (min-width: 375px) {
        html {
            font-size: calc(100% + 2 * (100vw - 375px) / 39);
            font-size: calc(16px + 2 * (100vw - 375px) / 39);
        }
    }
    @media screen and (min-width: 414px) {
        html {
            font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
            font-size: calc(18px + 4 * (100vw - 414px) / 586);
        }
    }
    @media screen and (min-width: 600px) {
        html {
            font-size: calc(125% + 4 * (100vw - 600px) / 400);
            font-size: calc(20px + 4 * (100vw - 600px) / 400);
        }
    }
    @media screen and (min-width: 1000px) {
        html {
            font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
            font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
        }
    }

    button{
        padding: 0;
        background-color: transparent;
        color: transparent;
        border: none;
        outline: none;
    }

    body{
        background: #fff;
    }

    .audio{
        --h: 3.375rem;
        width: 17.625rem;
        height: var(--h);
        border-radius: calc(var(--h)/2);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background: #f1f3f4;
    }

    .audio-play-btn{
        width: 0;
        height: 0;
        border: 0.4rem solid transparent;
        border-left: 0.4rem solid #000;
        transform: scalex(1.7);
        transform-origin: center left;
        cursor: pointer;
    }

    .audio-time{
        font-size: 0.75rem;
        color: #494a4a;
        margin-left: -0.4rem;
    }

    .audio-progress{
        position: relative;
        width: 3.3rem;
        height: 0.25rem;
        border-radius: 0.125rem;
        background:#000;
    }

    .audio-progress-btn{
        content: '';
        width: 0.75rem;
        height: 0.75rem;
        background: #000;
        border-radius: 50%;
        position: absolute;
        top: calc((0.25rem - 0.75rem) / 2);
        left: calc(100% - 0.75rem/2);
        cursor: pointer;
    }

    .audio-volumn{
        display: flex;
        --border-width: 0.15rem;
        width: 0.9rem;
        height: 0.9rem;
        border-radius: 50%;
        border: var(--border-width) solid #000;
        background: #f1f3f4;
        text-align: center;
        align-items: center;
        justify-content: center;
        position: relative;
    }

    .audio-volumn > i{
        display: inline-block;
        width: 0.65rem;
        height: 0.65rem;
        border-radius: 50%;
        background: #000;
    }

    .audio-horn{
        width: 0.82rem;
        height: 1.26rem;
        position: absolute;
        left: -0.2rem;
        top: -0.2rem;
        background: #f1f3f4;
    }
    .audio-horn::after{
        content: '';
        border: 0.5rem solid transparent;
        border-right:0.5rem solid #000;
        width: 0;
        height: 0;
        position: absolute;
        top:0.14rem;
        right: 0.1rem;
    }
    .audio-horn::before{
        content: '';
        width: 0.4rem;
        height: 0.4rem;
        background: #000;
        position: absolute;
        left: 0.15rem;
        top: 0.45rem;
    }

    .audio-menu{
        display: flex;
        height: 1rem;
        width: 0.25rem;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }

    .audio-menu span{
        width: 0.25rem;
        height: 0.25rem;
        background: #000;
        border-radius: 50%;
    }

Answer 14 · 2019-05-17T07:06:02.000Z

我是一个被播放折磨到放弃的demo

html {
    font-size: 16px;
    background: #fff;
}

body{
    margin: 0;
}

@media screen and (min-width: 375px) {
  html {
    /* iPhone6的375px尺寸作为16px基准，414px正好18px大小, 600 20px */
    font-size: calc(100% + 2 * (100vw - 375px) / 39);
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 414px-1000px每100像素宽字体增加1px(18px-22px) */
    font-size: calc(112.5% + 4 * (100vw - 414px) / 586);
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}
@media screen and (min-width: 600px) {
  html {
    /* 600px-1000px每100像素宽字体增加1px(20px-24px) */
    font-size: calc(125% + 4 * (100vw - 600px) / 400);
    font-size: calc(20px + 4 * (100vw - 600px) / 400);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 1000px往后是每100像素0.5px增加 */
    font-size: calc(137.5% + 6 * (100vw - 1000px) / 1000);
    font-size: calc(22px + 6 * (100vw - 1000px) / 1000);
  }
}

.audio{
  background: #d6d6d6;
  width: 18.3rem;
  height: 4.5rem;
  padding: 1.25rem 1rem;
}

.audio-content{
  background: #f1f3f4;
  border-radius: 3.2rem;
  height: 100%;
  width: 100%;
  display: flex;
  
  color: #000;
}

.operate-area{
  padding: 0.75rem 1.3rem;
  display: grid;
  grid-template-columns: 1fr 3fr 2.5fr 1fr 1fr;
  color: #000;
  align-items: center;
  grid-column-gap: 0.5rem;
  width: 100%;
}

.audio-play{
  width: 1rem;
  height: 1rem;
  position: relative;
  right: -0.5rem;
}
.play{
  border-bottom: 0.5rem solid transparent;
  border-left: 1rem solid #000;
  border-top: 0.5rem solid transparent;
}

.audio-time{
  display:flex;
  color: #707172;
  font-size: 1rem;
  position: relative;
  padding: 0 0.3rem;
}

.audio-timeline{
  position: relative;
  display: flex;
  align-items: center;
}

.audio-timeline-line{
  width:100%;
  height: 0.25rem;
  background: #000; 
  display: flex;
  align-items: center;
}

.audio-timeline-playhead{
  height:0.7rem;
  width: 0.7rem;
  border-radius:50%;
  background: #000;
  position: absolute;
  right: 0;
}

.audio-icon-others{
  display:flex;
  flex-direction: column;
  align-items: center;
}

.audio-icon-others div{
  height: 0.25rem;
  width:  0.25rem;
  border-radius:50%;
  background: #000;
  margin-bottom:  0.125rem;
}

.audio-icon-others div:last-child{
  margin-bottom: 0;
}


.audio-icon-sound{
  display: flex;
  align-items:center
}
.square{
  background: #000;
  height:  0.4rem;
  width:  0.4rem;
  position: relative;
  left:  0.4rem;
}

.tringle{
  border-bottom:  0.5rem solid transparent;
  border-right:  0.7rem solid #000;
  border-top:  0.5rem solid transparent;
}
.circle-one-out{
  height:  1rem;
  width:  0.25rem;
  overflow:hidden;
  
  position: relative;
  left: 0.125rem;
/*   display: flex; */
/*   align-items: center; */
}
.circle-one{
  border-radius: 50%;
  position: relative;
  right: 0.25rem;
  height: 0.5rem;
  width: 0.5rem;
  background: #000;
  margin: 0.25rem 0; 
}
.circle-two{
  box-shadow: 0.125rem 0 0 0 #000;
  border-radius: 50%;
  height: 1rem;
  width: 1rem;
  position: relative;
  right: 0.75rem;
}

<div class="audio">
  <div class="audio-content">
    <div class="operate-area">
      <div class="audio-play">
        <div class="play"></div>
      </div>
      <div class="audio-time">
        <div class="start-time">0:05</div>
        <div class="line">/</div>
        <div class="end-time">0:05</div>
      </div>
      <div class="audio-timeline">
        <div class="audio-timeline-line"></div>
        <div class="audio-timeline-playhead"></div>
      </div>
      <div class="audio-icon-sound">
        <div class="square"></div>
        <div class="tringle"></div>
        <div class="circle-one-out">
           <div class="circle-one"></div>
        </div>
        <div class="circle-two"></div>
      </div>
      <div class="audio-icon-others">
        <div></div>
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

Answer 15 · 2019-05-17T08:31:41.000Z

预览

开发思路依据元素audio标签
按钮扩大点击区域
使用input type='range'

 <style>
        .audio-wrap{
            color: #000;
            font-size: 16px;
        }
        .audio-content{
            display: flex;
            align-items: center;
            width: 25em;
            height: 3.5em;
            padding:0 .625em;
            color: currentColor;
            box-sizing: border-box;
            border-radius: 6.25em;
            background: #f1f3f4;
        }
        .audio-current-time,.audio-time-remaining{
            white-space: nowrap;
            margin-left: .3125em;
            font-size: .9em;
            opacity: 0.87;
        }
        /*滑轨*/
        .audio-controls-timeline {
            font-size: 100%;
            flex: 1;
            margin: 0;
            color: currentColor;
            padding: 1.625em .8125em;
            background: transparent;
            -webkit-appearance: none;
        }
        .audio-controls-timeline::-webkit-slider-thumb {
            margin-top: -.25em;
            -webkit-appearance: none;
            width: .75em;
            height: .75em;
            border-radius: 50%;
            background: currentColor;
        }
        .audio-controls-timeline::-webkit-slider-runnable-track{
            height: .25em;
            border-radius: .125em;
            background: currentColor;
        }
        /*按钮点击区域,扩大点击范围*/
        .audio-controls-button{
            position: relative;
            display: block;
            padding: 0;
            border: 0;
            height: 3em;
            width: 2em;
            overflow: hidden;
            font-size: 100%;
            color: currentColor;
            background: transparent;
        }
        .audio-controls-button:hover::before{
            position: absolute;
            content: '';
            height: 2em;
            width: 2em;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(32, 33, 36, 0.06);
            border-radius: 50%;
        }
        /*图标*/
        i[class|='audio-icon']{
            display: inline-block;
        }
        i[class*='-play']{
            vertical-align: -.125em;
            border-width: .5em 0 .5em .8em;
            border-style: solid;
            border-color: transparent transparent transparent currentColor;
        }
        i[class*='-menu']{
            width: .3125em;
            height: .3125em;
            transform: translateY(-50%);
            box-shadow: 0 .5em 0, 0 -.5em 0;
            border-radius: 50%;
            background: currentColor;
        }
        i[class*='-volume']{
            vertical-align: middle;
        }
        i[class*='-volume-left']{
            float: left;
            border-top: .3125em solid transparent;
            border-right: .3125em solid;
            border-bottom: .3125em solid transparent;
        }
        i[class*='-volume-left']::before {
            content: '';
            display: block;
            width: .25em;
            height: .375em;
            background: currentColor;
        }
        i[class*='-volume-right']{
            float: left;
            width: .3125em;
            height: .625em;
            margin-top: -.0625em;
            border: .125em solid;
            padding: .125em .125em .125em 0;
            border-left: 0;
            background-clip: content-box;
            background-color: currentColor;
            border-radius: 0 .625em .625em 0;
        }
        i[class*='-volume-right']::after {
            content: '';
            display: block;
            margin-top: -.25em;
            height: 1.125em;
            width: .125em;
            background-color: #f1f3f4;
        }
    </style>

<audio controls="controls"><source src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"></audio>
<div class="audio-wrap" style="color: #000;font-size: 14px;">
    <div class="audio-content">
        <button class="audio-controls-button">
            <i class="audio-icon-play"></i>
        </button>
        <div class="audio-current-time">0:00</div>
        <div class="audio-time-remaining">/ 0:08</div>
        <input class="audio-controls-timeline" type="range">
        <button class="audio-controls-button">
            <i class="audio-icon-volume">
                <i class="audio-volume-left"></i>
                <i class="audio-volume-right"></i>
            </i>
        </button>
        <button class="audio-controls-button">
            <i class="audio-icon-menu"></i>
        </button>
    </div>
</div>
<div class="audio-wrap" style="color: #00afff;font-size: 16px;margin-top: 20px">
    <div class="audio-content">
        <button class="audio-controls-button">
            <i class="audio-icon-play"></i>
        </button>
        <div class="audio-current-time">0:00</div>
        <div class="audio-time-remaining">/ 0:08</div>
        <input class="audio-controls-timeline" type="range">
        <button class="audio-controls-button">
            <i class="audio-icon-volume">
                <i class="audio-volume-left"></i>
                <i class="audio-volume-right"></i>
            </i>
        </button>
        <button class="audio-controls-button">
            <i class="audio-icon-menu"></i>
        </button>
    </div>
</div>

Answer 16 · 2019-05-17T11:39:11.000Z

在线DOM

<div class="audio-wrap">
  <button class="audio-button play" title="开始/暂停"></button>
  <span class="audio-time" title="当前时间">00:00</span>
  <span class="audio-time" title="总时长">00:00</span>
  <input class="audio-progressbar" type="range" title="时间进度">
  <button class="audio-button volume" title="音量">
    <span class="audio-volume-icon"><i></i></span>
  </button>
  <button class="audio-button menu" title="菜单"></button>
</div>

.audio-wrap {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 56px;
  box-sizing: border-box;
  border-radius: 28px;
  background: #f1f3f4;
}
.audio-time:nth-child(2):after {
  content: '/';
  margin: 0 5px;
}
/* 时间进度 */
.audio-progressbar {
  -webkit-appearance: none;
  flex: 1;
  height: 5px;
  background: #000;
  border-radius: .25em;
  font-size: 100%;
  mix-blend-mode: darken;
  margin: 0 10px;
}
.audio-progressbar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}
.audio-button {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  padding: 10px;
  background: none;
  border: none;
  position: relative;
  cursor: pointer;
  margin-right: 5px;
}
.audio-button:hover {
  background: rgba(0,0,0,.06);
}
.audio-button:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
/* 播放按钮 */
.audio-button.play::after {
  border: 7px solid transparent;
  border-left: 10px solid #000;
  left: 7px;
}
/* 菜单按钮 */
.audio-button.menu::after {
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
  box-shadow: 0 8px 0, 0 -8px 0;
}
/* 音量 */
.audio-volume-icon {
  display: inline-block;
  padding: 5px 3px;
  margin-left: -7px;
  transform: translate(-50%, -3px);
  border: 7px solid transparent;
  border-right-color: currentColor;
  box-shadow: inset 15px 0 0;
}
.audio-controls-button-volume-icon > i {
  position: relative;
  left: calc(7px * 2);
}
.audio-volume-icon > i::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.4em;
  transform: translate(15px, -50%);
  box-sizing: border-box;
  border: 3px solid;
  border-left: 0;
  border-radius: 0 10px 10px 0;
}
.audio-volume-icon > i::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 10px;
  transform: translate(12px, -50%);
  background: currentColor;
  border-radius: 0 7px 7px 0;
}

Answer 17 · 2019-05-17T12:37:40.000Z

This link

<div class='wrap'>
        <div class='audio'>
            <button class='audio-control'></button>
            <span class='audio-time'>0:01</span>
            <span class='total-time'>/ 0:10</span>
            <div class="audio-slider">
                <button class="slider-track"></button>
                <button class="slider-thumb"></button>
            </div>
            <button class='audio-volume'>
              <i></i>
            </button>
            <button class='audio-menu'>
                <i class="icon" name='menu'></i>
            </button>
        </div>
    </div>

.wrap{
min-width: 400px;
min-height:54px;
display: table-cell;
vertical-align: middle;
border-radius: 100px;
background: #d6d6d6;
}
.audio{
width:90%;
margin:0px auto;
height:80%;
line-height:90%;
position: relative; 
padding-top:12px;

}
.audio-control{
 border:none;
 background:transparent;
 cursor:pointer;
 outline: none;
}
.audio-control::after{
  content:"";
  border:7px solid;
  border-left-width: 11px;
  border-color:transparent transparent transparent black;
  display:inline-block;
  position:relative;
  height:100%;
  vertical-align:middle;
}
.audio span{
display: inline-block;
font-size:12px;
margin-left: -6px;
margin-right:4px;
color: #586069;
margin-top:2px;
}
.audio-time,.total-time{
    display: inline-block;
    height: 32px;
    position: relative;
    top:2px;
}
.audio-slider{
    display: inline-block; 
    --percent:20; 
    position:relative;
}
.slider-track {
    display: block;
    width:180px; 
    height:4px;
    background-color:black;
    border-radius: 2px;
    border: 0;
    padding: 0;
    outline: 0;
}
.slider-track::before {
    content: '';
    display: block;
    height: 100%;
    background-color: skyblue;
    width: calc(1% * var(--percent));
}
.slider-thumb {
    position: absolute;
    width: 16px; 
    height: 16px;
    border: 0; 
    padding: 0;
    background: #fff;
    box-shadow: 0 0 0 1px skyblue;
    border-radius: 50%;
    left: calc(1% * var(--percent));
    top:-6px;
    margin: auto -8px;
    outline:none;
}
 
.audio-volume,.audio-menu{
    position: relative;
    margin-left:20px;
    outline:none;
    border: none;
    background:transparent;
}
.audio-volume::before{
    content: '';
    position: absolute;
    background:black;
    width: 0.25em;
    height: 0.375em;
    border-style: solid;
    left: 0;
    top:-7px;
    background-clip: content-box;
    border-color: transparent currentColor transparent transparent;
}
.audio-volume::after{
    content: '';
    width: 0.625em;
    height: 0.625em;
    position: absolute;
    right: -4px;
    top: -8.6px;
    border-radius: 50%;
    border: 0.125em solid;
    padding: 0.125em;
    background: currentColor;
    background-clip: content-box;
    clip: rect(0,1.125em,1.125em,0.6875em);
}
.icon[name='menu']{
    display: inline-block;
    position: relative;
    width: 0.25em;
    height: 0.25em;
    border-radius: 50%;
    background:black;
    box-shadow: 0 -.4em 0 0 black,0 .4em 0 0 black;
}

Error:
1 因为不知道audio的按钮怎么用css渲染，参考了上面的代码，但是对一些属性大小的设置不是很理解。
2 行内元素的居中设置不是很顺利
3 不具有扩展性，当想改变audio的长宽时，发现里面的元素位置会错位，且不会相应的伸展。

Answer 18 · 2019-05-17T15:52:20.000Z

在线demo

  <div class="audio">
    <div class="audio__btn"></div>
    <div class="audio__time">
      <span>0:05</span>
      <i>/</i>
      <span>0:05</span>
    </div>
    <input type="range" class="audio__range">
    <div class="audio__icon">
      <i></i>
      <span></span>
    </div>
    <div class="audio__dian">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

body {
  padding: 0;
  margin: 0;
  background: #d6d6d6;
}
.audio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  height: 55px;
  border-radius: 30px;
  padding: 0 20px;
  min-width: 320px;
  margin: 15px auto;
  background: #f1f3f4;
}
.audio__btn {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 16px solid #2f2f2f;
  border-bottom: 12px solid transparent;
}
.audio__time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 78px;
  font-size: 16px;
  color: #5b5c5c;
  margin-left: 15px;
  margin-right: 15px;
}
.audio__range {
  -webkit-appearance: none;
  flex: 1;
  height: 4px;
  font-size: 100%;
  color: #191919;
  background: #191919;
  border-radius: 4px;
}
.audio__range[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #191919;
  border-radius: 50%;
  /*外观设置为圆形*/
}
.audio__icon {
  position: relative;
  width: 45px;
  height: 24px;
  margin-left: 15px;
}
.audio__icon span {
  position: absolute;
  top: 0;
  left: 6px;
  display: block;
  border-right: 12px solid #191919;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  height: 12px;
}
.audio__icon i {
  position: absolute;
  top: 6px;
  left: 0;
  width: 12px;
  height: 12px;
  background: #191919;
}
.audio__icon::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 10px;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  background: currentColor;
  border-radius: 0 .3em .3em 0;
}
.audio__icon::before {
  content: "";
  position: absolute;
  width: 11px;
  height: 24px;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  box-sizing: border-box;
  border: .16em solid;
  border-left: 0;
  border-radius: 0 .7em .7em 0;
}
.audio__dian {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 24px;
  width: 6px;
}
.audio__dian span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #191919;
}

Answer 19 · 2019-05-17T16:09:55.000Z

demo

<div class="audio-player">
    <div class="audio-player--button-play">
        <div class="audio-player--button-play-icon"></div>
    </div>
    <div class="audio-player--time">
        <span class="audio-player--time-duration">0:05</span>
        <span class="audio-player--time-separator">/</span>
        <span class="audio-player--time-total">0:05</span>
    </div>
    <div class="audio-player--slider-wrapper">
        <div class="audio-player--slider">
            <div class="audio-player--slider-bar" style="width: 50%;"></div>
            <div class="audio-player--slider-button-wrapper" style="left: 50%;">
                <div class="audio-player--slider-button"></div>
            </div>
        </div>
    </div>
    <div class="audio-player--voice-wrapper">
        <div class="audio-player--voice">
            <i></i>
        </div>
    </div>
    <div class="audio-player--more">
        <i></i>
        <i></i>
        <i></i>
    </div>
</div>

.audio-player {
    width: 400px;
    border-radius: 54px;
    height: 54px;
    --mainBC: #f1f3f4;
    background-color: var(--mainBC);
    display: flex;
    align-items: center;
    justify-content: space-between;
    --color: black;
}
.audio-player--button-play {
    text-align: center;
    --btnWidth: 32px;
    --btnHeight: 32px;
    width: var(--btnWidth);
    height: var(--btnHeight);
    line-height: var(--btnHeight);
    font-size: 0;
    margin-left: 10px;
    border-radius: 50%;
    cursor: pointer;
}
.audio-player--button-play:hover {
    background: rgb(229, 231, 232);
}
.audio-player--button-play-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent currentColor;
    border-width: calc(10px / 1.428) 0 calc(10px / 1.428) 10px;
    border-style: solid;
    transform-origin: 0 0 0;
}
.audio-player--time {
    font-size: 14px;
}
.audio-player--slider-wrapper {
    width: 20%;
    flex-grow: 1;
    margin: 0 10px;
}
.audio-player--slider {
    position: relative;
    width: 100%;
    background-color: #595959;
    height: 4px;
    border-radius: 4px;
}
.audio-player--slider-bar {
    height: 4px;
    background-color: currentColor;
}
.audio-player--slider-button-wrapper {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -14px;
    transform: translate(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab;
}
.audio-player--slider-button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: currentColor;
}
.audio-player--voice-wrapper {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-content: center;
}
.audio-player--voice {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.audio-player--voice:before {
    content: '';
    width: 4px;
    height: 6px;
    border-color: var(--mainBC) currentColor var(--mainBC) var(--mainBC);
    border-width: 4px 4px 4px 0;
    border-style: solid;
    background-color: currentColor;
    display: inline-block;
}
.audio-player--voice i {
    font-size: 0;
    position: relative;
    margin-left: 2px;
}
.audio-player--voice i:before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 12px;
    border: 2px solid;
    border-left: 2px;
    border-radius: 0 8px 8px 0;
    background-color: var(--mainBC);
    vertical-align: middle;
}
.audio-player--voice i:after {
    content: '';
    width: 3px;
    height: 6px;
    border-radius: 0 3px 3px 0;
    background-color: currentColor;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}
.audio-player--more {
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: space-around;
    cursor: pointer;
}
.audio-player--more i {
    width: 6px;
    height: 6px;
    display: block;
    margin: 1px;
    border-radius: 50%;
    background: currentColor;
}

Answer 20 · 2019-05-17T17:51:36.000Z

jsBin

<div class="audio">
  <div class="play"></div>
  <div class="pause"></div>
  <div class="time">1:23/4:33</div>
  <div class="progress-bar">
    <div class="progress-all"></div>
    <div class="progress-has-play"></div>
    <div class="dot"></div>
  </div>
  <div class="vol">
    <div></div>
  </div>
  <div class="more">
  </div>
</div>

.audio {
  height: 56px;
  border-radius: 28px;
  display: flex;
  background: #f1f3f4;
  padding: 12px;
  box-sizing: border-box;
}


body {
  background: black;
}


.pause,
.vol,
.more,
.play {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time {
  line-height: 32px;
  margin: 0 4px;
}

.pause::after {
  content: '';
  border-left: solid 4px #000000;
  border-right: solid 4px #000000;
  height: 14px;
  width: 6px;
}

.progress-bar {
  flex: 1;
  width: 0;
  position: relative;
  margin: 0 4px;
}

.progress-all, .progress-has-play {
  position: absolute;
  top: 0;
  bottom: 0;
  height: 4px;
  background: #59595a;
  width: 100%;
  border-radius: 2px;
  margin: auto;
}

.progress-has-play {
  width: 30px;
  background: #000
}

.dot {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  bottom: 0;
  border-radius: 50%;
  margin: auto;
  left: 30px;
  background: black;
}

.play::after {
  content: '';
  border-left: solid 10px #000000;
  border-top: solid 8px transparent;
  border-bottom: solid 8px transparent;
  height: 0;
  width: 0;
}

.more::after {
  content: '';
  border-left: dotted 4px #000000;
  height: 16px;
}

.pause:hover,
.vol:hover,
.more:hover,
.play:hover {
  background: #d7d7d7;
}

.vol {
  position: relative;
}

.vol > div {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #000000;
  background: black;
  background-clip: content-box;
  padding: 2px;
}

.vol::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background: black;
  left: 4px;
}

.vol::before {
  position: absolute;
  content: '';
  left: 5px;
  border-right: solid 10px #000000;
  border-top: solid 8px #f1f3f4;
  border-bottom: solid 8px #f1f3f4;
  outline: 2px solid #f1f3f4;
}

.vol:hover::before {
  outline: 2px solid #d7d7d7;;
  border-top: solid 8px #d7d7d7;
  border-bottom: solid 8px #d7d7d7;
}

Answer 21 · 2019-05-18T02:28:01.000Z

自适应使用flex是比较好的方法，图标按钮尺寸固定，进度条宽度自适应；
进度条使用 input[type="range"] 是非常棒的实现与想法；
自适应不是等比例缩放，而是进度条宽度自适应；
注意视觉还原；
命名上注意上下文，例如audio-开头；
CSS图标尽快使用伪元素，更好维护；
CSS图标常用技巧：万能，box-shadow，linear-gradient/radial-radient，clip-path。