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

最新推荐文章于 2024-05-08 14:00:04 发布

微光

最新推荐文章于 2024-05-08 14:00:04 发布

阅读量1w

点赞数 4

分类专栏： css 文章标签： css中transform-skew属性轮盘扇形菜单

本文链接：https://blog.csdn.net/Web_J/article/details/73499058

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

先上效果图

附上代码：

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