CSS3实现的player播放按钮_html/css_WEB-ITnose

完成的效果如下

立即学习“前端免费学习笔记（深入）”；

查看效果并下载

立即学习“前端免费学习笔记（深入）”；

Step 1：先了解border的原理：

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

Step 2：HTML代码结构

立即学习“前端免费学习笔记（深入）”；

Html代码   

1.   
2.    
3.   
4.     Start  
5.   
  
6.    
7.   
8.     Pause  
9.   
  
10.    
11.   
12.     Stop  
13.   
  
14.    
15.   
16.     Forward  
17.     Forward  
18.   
  
19.    
20.   
21.     Rewind  
22.     Rewind  
23.   
  
24.   
25.   
26.     Eject  
27.     Eject  
28.   
  
29.   

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

Step 3：画背景圆，position：relative

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

Css代码   

1. .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }  

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

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

立即学习“前端免费学习笔记（深入）”；

全部的CSS如下：

立即学习“前端免费学习笔记（深入）”；

立即学习“前端免费学习笔记（深入）”；

Css代码   

1.    .playContainer { position: relative; float: left; background: rgba(0, 0, 0, 0.8); padding: 20px; }  
2. .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height: 0; width:0; -webkit-border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; margin: 0 20px; }  
3. .playContainer a { border-style: solid; text-indent: -9999px; position: absolute; top: -8px; left: -3px;  }  
4.   
5. .playBtn a { border-color: transparent transparent transparent #fff; border-width: 8px 0 8px 12px;  width: 0; height: 0; }  
6. .pauseBtn a { border-color: transparent white;  border-width: 0 6px; height: 15px; width: 6px; left: -9px; }  
7. .stopBtn a { border: 7px solid #fff; height: 0; width: 0; left: -7px; top: -7px;}  
8. .forwardBtn a { border-left-width: 8px; left: 1px; }  
9. .forwardBtn a:first-child { margin-left: -7px;  }  
10.   
11. .rewindBtn a { border-width: 8px 8px 8px 0; border-color: transparent #fff transparent transparent; width: 0; height: 0; }  
12. .rewindBtn a:first-child { margin-left: -7px; }  
13.   
14. .ejectBtn a.arrow { border-width: 0 8px 8px 8px; border-color: transparent transparent #fff transparent; top:-26px; left:-8px; }  
15. ectBtn a.dash { border-width: 0 0 4px; border-color: transparent transparent #fff; height: 0; width:16px; left: -8px; top: 4px; }