HTML5+CSS3网页实例:制作网页播放器按钮

•网页制作•2012/7/7• 1491

最近开始学习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>

文章分类: 网页制作

打开微信，点击底部的“发现”，使用“扫一扫”即可将网页分享至朋友圈。