css制作抽奖轮盘效果/扇形菜单

拼搏现实的明天。 2022-06-14 12:21 147阅读 0赞

先上效果图

![Center][]

附上代码：

<!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>

[Center]: /images/20220614/2ee5a1e2ce7b4895bb77b6917c0e27bf.png