首页 > 代码库 > 使用纯css做一个播放器
使用纯css做一个播放器
首先，贴出成品图，如下：
可以发现播放器的基本形状有了，但是需要精确到每一个方向，不能溢出，就得以如下的方式写，贴出静态代码：
html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/main.css">
<link rel="stylesheet" href="http://www.mamicode.com/font-awesome-4.7.0/css/font-awesome.min.css" >
<script src=http://www.mamicode.com/‘js/jquery-1.9.1.min.js‘></script>
<script src=http://www.mamicode.com/‘js/main.js‘></script>
</head>
<body>
<div class="container">
<div class="big">
<div class="up"></div>
<div class="down"></div>
<div class="left"></div>
<div class="right"></div>
<div class="up-text"><span class="fa fa-chevron-up "></span></div>
<div class="down-text"><span class="fa fa-chevron-down "></span></div>
<div class="left-text"><span class="fa fa-chevron-left "></span></div>
<div class="right-text"><span class="fa fa-chevron-right "></span></div>
<div class="mid">
<div class="small">
<p>确定</p>
</div>
</div>
</div>
</div>
</body>
</html>
css如下：
*{
margin: 0;
padding: 0;
}
div{
box-sizing:border-box;
}
.container{
width: 300px;
height: 300px;
background: #3C5192;
border-radius: 50%;
margin: 0 auto;
margin-top:20px;
position: relative;
overflow: hidden;
transform: rotate(45deg);
}
.big{
width: 300px;
height: 300px;
background: #3C5192;
border-radius: 50%;
margin: 0 auto;
transform: rotate(-45deg);
position: relative;
overflow: hidden;
}
.mid{
width: 150px;
height: 150px;
position: absolute;
top:50%;
margin-top:-75px;
background: #4A639F;
left: 50%;
margin-left:-75px;
border-radius: 50%;
}
.small{
width: 120px;
height: 120px;
position: absolute;
top:50%;
margin-top:-60px;
background: #3C5192;
left: 50%;
margin-left:-60px;
border-radius: 50%;
text-align: center;
color: #A2BAE9;
font-size: 20px;
font-weight: bold;
line-height: 120px;
}
.up{
height: 150px;
width: 150px;
background: #ccc;
position: absolute;
left: 0;
top:0;
transform: rotate(45deg);
transform-origin:100% 100%;
}
.down{
height: 150px;
width: 150px;
background: green;
position: absolute;
right: 0;
bottom:0;
transform: rotate(45deg);
transform-origin:0% 0%;
}
.left{
height: 150px;
width: 150px;
background: red;
position: absolute;
left: 0;
bottom:0;
transform: rotate(45deg);
transform-origin:100% 0%;
}
.right{
height: 150px;
width: 150px;
background: blue;
position: absolute;
right: 0;
top:0;
transform: rotate(45deg);
transform-origin:0% 100%;
}
.up-text{
position: absolute;
left:50%;
top:30px;
font-size:22px;
margin-left:-11px;
color: #90B8E4;
text-shadow:0 0 4px #A2BAE9;
}
.down-text{
position: absolute;
left:50%;
bottom:30px;
font-size:22px;
margin-left:-11px;
color: #90B8E4;
text-shadow:0 0 4px #A2BAE9;
}
.left-text{
position: absolute;
top:50%;
left:30px;
font-size:22px;
margin-top:-11px;
color: #90B8E4;
text-shadow:0 0 4px #A2BAE9;
}
.right-text{
position: absolute;
top:50%;
right:30px;
font-size:22px;
margin-top:-11px;
color: #90B8E4;
text-shadow:0 0 4px #A2BAE9;
}
如上写完过后，再添加js就可以很精确了：
$(function(){
$(‘.up,.up-text‘).click(function(){
alert(‘up‘);
})
$(‘.down,.down-text‘).click(function(){
alert(‘down‘);
})
$(‘.left,.left-text‘).click(function(){
alert(‘left‘);
})
$(‘.right,.right-text‘).click(function(){
alert(‘right‘);
})
})
一个播放器基本就完成啦！
使用纯css做一个播放器