最近开始学习html5 css3,练习下css3，绘制了几个播放器的按钮，有什么更好的建议，望大家指出
文章插图
文章插图
最近开始学习html5 css3,练习下css3，绘制了几个播放器的按钮，有什么更好的建议，望大家指出……
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;
}
播放器按钮
【HTML5 CSS3制作网页播放器按钮】
推荐阅读
- 油面筋怎么吃好 油面筋怎么做好吃又简单
- 承包食堂需要哪些资质
- 黑全麦粉和全麦粉的区别是什么
- 家中最简单糖糕方法
- CAD三维制图模式怎么开？CAD二维图转三维图的方法
- 黑芝麻的功效与作用及食用方法
- 学注册会计师需要什么条件
- 车上放蜘蛛人是什么意思 车上放蜘蛛人是什么梗
- 琉璃璇玑什么时候知道自己是战神