使用CSS3实现的player播放按钮

完成的效果如下

查看效果并下载

Step 1：先了解border的原理：

Step 2：HTML代码结构

1. <sectionclass="playContainer">
2. <liclass="playBtn">
3. <ahref="#"title="start">Start</a>
4. </li>
5. <liclass="pauseBtn">
6. <ahref="#"title="pause">Pause</a>
7. </li>
8. <liclass="stopBtn">
9. <ahref="#"title="stop">Stop</a>
10. </li>
11. <liclass="forwardBtnplayBtn">
12. <ahref="#"title="forward">Forward</a>
13. <ahref="#"title="forward">Forward</a>
14. </li>
15. <liclass="rewindBtn">
16. <ahref="#"title="rewind">Rewind</a>
17. <ahref="#"title="rewind">Rewind</a>
18. </li>
19. <liclass="ejectBtn">
20. <ahref="#"class="arrow">Eject</a>
21. <ahref="#"class="dash">Eject</a>
22. </li>
23. </section>

Step 3：画背景圆，position：relative

1. .playContainerli{position:relative;float:left;border:25pxsolid#404040;color:#404040;height:0;width:0;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;border-radius:100%;margin:020px;}

Step 4：画stop按钮，要让按钮居中。

按钮相对外层圆圈绝对定位，从圆圈的中心开始，所以要调整top和left值

stop按钮边长14px，相对原点需要向上、向左移动7个像素，居中。

全部的CSS如下：

1. .playContainer{position:relative;float:left;background:rgba(0,0,0,0.8);padding:20px;}
2. .playContainerli{position:relative;float:left;border:25pxsolid#404040;color:#404040;height:0;width:0;-webkit-border-radius:100%;-moz-border-radius:100%;-o-border-radius:100%;border-radius:100%;margin:020px;}
3. .playContainera{border-style:solid;text-indent:-9999px;position:absolute;top:-8px;left:-3px;}
5. .playBtna{border-color:transparenttransparenttransparent#fff;border-width:8px08px12px;width:0;height:0;}
6. .pauseBtna{border-color:transparentwhite;border-width:06px;height:15px;width:6px;left:-9px;}
7. .stopBtna{border:7pxsolid#fff;height:0;width:0;left:-7px;top:-7px;}
8. .forwardBtna{border-left-width:8px;left:1px;}
9. .forwardBtna:first-child{margin-left:-7px;}
11. .rewindBtna{border-width:8px8px8px0;border-color:transparent#ffftransparenttransparent;width:0;height:0;}
12. .rewindBtna:first-child{margin-left:-7px;}
14. .ejectBtna.arrow{border-width:08px8px8px;border-color:transparenttransparent#ffftransparent;top:-26px;left:-8px;}
15. ectBtna.dash{border-width:004px;border-color:transparenttransparent#fff;height:0;width:16px;left:-8px;top:4px;}