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