效果图
html代码
//播放按钮
//暂停按钮 ▐▐
//重置按钮

css
.circle { border: solid 1px #23527c; border-radius: 50px; height: 50px; position: absolute; width: 50px; } .circle:hover { transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); } .circle_inner_play { content: ; display: block; width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #23527c; position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -7px; } .circle_inner_pause { position: absolute; top: 50%; left: 50%; margin-left: -12px; margin-top: -10px; color: #23527c; } .circle_inner_reset { width: 18px; height: 18px; background-color: #23527c; margin: -9px 0 0 -9px; position: absolute; top: 50%; left: 50%; }