CSS基础测试6 #25

zhangxinxu · 2019-05-15T10:58:36Z

本期题目如下：

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

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

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

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

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

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

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

感谢您的参与！

wingmeng · 2019-05-15T12:50:54Z

写之前翻看了下 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);
}

Seasonley · 2019-05-15T13:19:10Z

在线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;
}

liyongleihf2006 · 2019-05-15T13:40:08Z

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%;
}

XboxYan · 2019-05-15T13:43:26Z

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;
}

右侧为渐变生成

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

livetune · 2019-05-15T14:50:48Z

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;
}

NeilChen4698 · 2019-05-15T15:37:47Z

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;
}

guqianfeng · 2019-05-15T16:06:41Z

在线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;
        }

liulyu · 2019-05-16T01:09:23Z

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;
        }

imlijq · 2019-05-16T05:13:44Z

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;
}

ximuli · 2019-05-16T05:57:53Z

在线 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;
}

Despair-lj · 2019-05-16T09:57:11Z

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;
}

asyncguo · 2019-05-16T14:24:07Z

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%;
}

jsweber · 2019-05-16T16:09:35Z

在线预览

    <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%;
    }

CandyQiu · 2019-05-17T07:06:02Z

我是一个被播放折磨到放弃的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>

silverWolf818 · 2019-05-17T08:31:41Z

预览

开发思路依据元素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>

miaomiaolin · 2019-05-17T11:39:11Z

在线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;
}

whrice · 2019-05-17T12:37:40Z

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的长宽时，发现里面的元素位置会错位，且不会相应的伸展。

sghweb · 2019-05-17T15:52:20Z

在线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;
}

frankyeyq · 2019-05-17T16:09:55Z

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;
}

wind1996 · 2019-05-17T17:51:36Z

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;
}

zhangxinxu · 2019-05-18T02:28:01Z

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CSS基础测试6 #25

CSS基础测试6 #25

zhangxinxu commented May 15, 2019

wingmeng commented May 15, 2019 •

edited

Loading

Seasonley commented May 15, 2019

liyongleihf2006 commented May 15, 2019

XboxYan commented May 15, 2019 •

edited

Loading

livetune commented May 15, 2019

NeilChen4698 commented May 15, 2019

guqianfeng commented May 15, 2019

liulyu commented May 16, 2019

imlijq commented May 16, 2019

ximuli commented May 16, 2019

Despair-lj commented May 16, 2019

asyncguo commented May 16, 2019

jsweber commented May 16, 2019 •

edited

Loading

CandyQiu commented May 17, 2019

silverWolf818 commented May 17, 2019

miaomiaolin commented May 17, 2019

whrice commented May 17, 2019 •

edited

Loading

sghweb commented May 17, 2019 •

edited

Loading

frankyeyq commented May 17, 2019

wind1996 commented May 17, 2019

zhangxinxu commented May 18, 2019

CSS基础测试6 #25

CSS基础测试6 #25

Comments

zhangxinxu commented May 15, 2019

wingmeng commented May 15, 2019 • edited Loading

Seasonley commented May 15, 2019

liyongleihf2006 commented May 15, 2019

XboxYan commented May 15, 2019 • edited Loading

livetune commented May 15, 2019

NeilChen4698 commented May 15, 2019

guqianfeng commented May 15, 2019

liulyu commented May 16, 2019

imlijq commented May 16, 2019

ximuli commented May 16, 2019

Despair-lj commented May 16, 2019

asyncguo commented May 16, 2019

jsweber commented May 16, 2019 • edited Loading

CandyQiu commented May 17, 2019

silverWolf818 commented May 17, 2019

miaomiaolin commented May 17, 2019

whrice commented May 17, 2019 • edited Loading

sghweb commented May 17, 2019 • edited Loading

frankyeyq commented May 17, 2019

wind1996 commented May 17, 2019

zhangxinxu commented May 18, 2019

wingmeng commented May 15, 2019 •

edited

Loading

XboxYan commented May 15, 2019 •

edited

Loading

jsweber commented May 16, 2019 •

edited

Loading

whrice commented May 17, 2019 •

edited

Loading

sghweb commented May 17, 2019 •

edited

Loading