您的位置：首页 > Web前端 > CSS

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

2017-06-20 15:46 381 查看

先上效果图

附上代码：

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

<
4000
/span></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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css中transform-skew属性轮盘扇形菜单

相关文章推荐

新的分享

章节导航