1. 程式人生 > >css製作抽獎輪盤效果/扇形選單

css製作抽獎輪盤效果/扇形選單

先上效果圖

附上程式碼:
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<title>輪盤</title>
<style type="text/css">
#L {
position: relative;
overflow: hidden;
width: 400px;
height: 400px;
margin: 150px auto;
background-color: #ddd;
border-radius: 200px;
}

#L ul li {
list-style: none;
position: absolute;
width: 200px;
height: 200px;
right: 50%;
top: 0;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}

#L .L1 {
background-color: red;
-webkit-transform: skew(54deg);
-moz-transform: skew(54deg);
-ms-transform: skew(54deg);
transform: skew(54deg);
}

//傾斜54,旋轉36
#L .L2 {
background-color: #FCF6E6;
-webkit-transform: rotate(36deg) skew(54deg);
-moz-transform: rotate(36deg) skew(54deg);
-ms-transform: rotate(36deg) skew(54deg);
transform: rotate(36deg) skew(54deg);
}

#L .L3 {
background-color: red;
-webkit-transform: rotate(72deg) skew(54deg);
-moz-transform: rotate(72deg) skew(54deg);
-ms-transform: rotate(72deg) skew(54deg);
transform: rotate(72deg) skew(54deg);
}

#L .L4 {
background-color: #FCF6E6;
-webkit-transform: rotate(108deg) skew(54deg);
-moz-transform: rotate(108deg) skew(54deg);
-ms-transform: rotate(108deg) skew(54deg);
transform: rotate(108deg) skew(54deg);
}

#L .L5 {
background-color: red;
-webkit-transform: rotate(144deg) skew(54deg);
-moz-transform: rotate(144deg) skew(54deg);
-ms-transform: rotate(144deg) skew(54deg);
transform: rotate(144deg) skew(54deg);
}

#L .L6 {
background-color: #FCF6E6;
-webkit-transform: rotate(180deg) skew(54deg);
-moz-transform: rotate(180deg) skew(54deg);
-ms-transform: rotate(180deg) skew(54deg);
transform: rotate(180deg) skew(54deg);
}

#L .L7 {
background-color: red;
-webkit-transform: rotate(216deg) skew(54deg);
-moz-transform: rotate(216deg) skew(54deg);
-ms-transform: rotate(216deg) skew(54deg);
transform: rotate(216deg) skew(54deg);
}

#L .L8 {
background-color: #FCF6E6;
-webkit-transform: rotate(252deg) skew(54deg);
-moz-transform: rotate(252deg) skew(54deg);
-ms-transform: rotate(252deg) skew(54deg);
transform: rotate(252deg) skew(54deg);
}

#L .L9 {
background-color: red;
-webkit-transform: rotate(288deg) skew(54deg);
-moz-transform: rotate(288deg) skew(54deg);
-ms-transform: rotate(288deg) skew(54deg);
transform: rotate(288deg) skew(54deg);
}

#L .L10 {
background-color: #FCF6E6;
-webkit-transform: rotate(324deg) skew(54deg);
-moz-transform: rotate(324deg) skew(54deg);
-ms-transform: rotate(324deg) skew(54deg);
transform: rotate(324deg) skew(54deg);
}
</style>


</head>


<body>
<div id="L">
<ul>


<li class="L1">


</li>
<li class="L2">


</li>
<li class="L3">


</li>
<li class="L4">


</li>
<li class="L5">


</li>
<li class="L6">


</li>
<li class="L7">


</li>
<li class="L8">


</li>
<li class="L9">


</li>


<li class="L10">


</li>


</ul>
</div>
</body>


</html>