简单的html直播网页,HTML5+CSS3网页实例:简单制作网页播放器按钮

破洛洛文章简介&＃xff1a;最近开始学习html5&＃43;css3,练习下css3&＃xff0c;绘制了几个播放器的按钮。

最近开始学习html5&＃43;css3,练习下css3&＃xff0c;绘制了几个播放器的按钮&＃xff0c;有什么更好的建议&＃xff0c;望大家指出……

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;

}

播放器按钮