最近开始学习html5+css3,练习下css3，绘制了几个播放器的按钮，有什么更好的建议，望大家指出……
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <style> body{ background:#000; } header{ font-family:"MicroSoft YaHei"; font-size:30px; color:#990000; } .circle{ width:120px; height:120px; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px; border:2px #FFF solid; float:left; margin:10px; cursor:pointer; } .circle:hover,.circle1:hover{ -webkit-box-shadow:rgba(255,255,255,0.6) 0 0 15px; -moz-box-shadow:rgba(255,255,255,0.6) 0 0 15px; box-shadow:rgba(255,255,255,0.6) 0 0 15px; } .circle1{ width:140px; height:140px; -webkit-border-radius:70px; -moz-border-radius:70px; border-radius:70px; border:2px #FFF solid; float:left; cursor:pointer; } .triangleRight{ width: 0; height: 0; border-left: 60px solid #FFF; border-top: 30px solid transparent; border-bottom: 30px solid transparent; -webkit-transform:scale(0.6,1.2); -moz-transform:scale(0.6,1.2); transform:scale(0.6,1.2); } .next1{ margin:30px -10px 0 20px; float:left; } .next2{ margin:30px 0 0 -20px; float:left; } .triangleleft{ width: 0; height: 0; border-Right: 60px solid #FFF; border-top: 30px solid transparent; border-bottom: 30px solid transparent; -webkit-transform:scale(0.6,1.2); -moz-transform:scale(0.6,1.2); transform:scale(0.6,1.2); } .pre1{ margin:30px -10px 0 10px; float:left; } .pre2{ margin:30px 0 0 -20px; float:left; } .pause{ width:20px; height:80px; background:#FFF; float:left; } .pause1{ margin:30px 10px 0 40px; } .pause2{ margin:30px 10px 0 10px; } </style> </head> <body> <header>播放器按钮</header><section> <div class="circle"> <div class="triangleLeft pre1"></div> <div class="triangleLeft pre2"></div> </div> <div class="circle1"> <div class="pause pause1"></div> <div class="pause pause2"></div> </div> <div class="circle"> <div class="triangleRight next1"></div> <div class="triangleRight next2"></div> </div> </section> </body> </html>
以上就是HTML5+CSS3制作网页播放器按钮，希望大家喜欢，请继续关注乐呵呵网。
