css製作抽獎輪盤效果/扇形選單
阿新 • • 發佈：2019-01-12
先上效果圖
附上程式碼：
<!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);
}
//傾斜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);
-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>
附上程式碼：
<!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);
}
//傾斜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);
-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>