css实现折扇效果

最新推荐文章于 2023-06-04 23:22:07 发布

你眼里有一条星河照耀着我

最新推荐文章于 2023-06-04 23:22:07 发布

阅读量244

点赞数

分类专栏：笔记文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_51986661/article/details/126952383

版权

笔记专栏收录该内容

26 篇文章 9 订阅

订阅专栏

* {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
    }

    .list {
      position: relative;
      width: 600px;
      height: 300px;
      border-bottom: 2px solid #999;
      margin: 50px auto;
    }

    .list li {
      position: absolute;
      left: 50%;
      bottom: 30px;
      width: 60px;
      height: 200px;
      transition: all 1.5s;
      box-shadow: 0px 0px 3px #999;
      transform-origin: center bottom;
      /* margin-left: -30px; */
      background-color: #ff0000;
    }
/* .list:hover li {
  transform-origin: bottom;
} */
.list:hover li:nth-child(2) {
      transform: rotate(15deg);
      background-color: #ffa500;
    }
    .list:hover li:nth-child(3) {
      transform: rotate(30deg);
      background-color: #ffff00;
    }
    .list:hover li:nth-child(4) {
      transform: rotate(45deg);
      background-color: #008000;
    }
    .list:hover li:nth-child(5) {
      transform: rotate(60deg);
      background-color: #0000ff;
    }
    .list:hover li:nth-child(6) {
      transform: rotate(75deg);
      background-color: #00ffff;
    }
    .list:hover li:nth-child(7) {
      transform: rotate(90deg);
      background-color: #800080;
    }
    .list:hover li:nth-last-child(1) {
      transform: rotate(-15deg);
      background-color: #ffa500;
    }
    .list:hover li:nth-last-child(2) {
      transform: rotate(-30deg);
      background-color: #ffff00;
    }
    .list:hover li:nth-last-child(3) {
      transform: rotate(-45deg);
      background-color: #008000;
    }
    .list:hover li:nth-last-child(4) {
      transform: rotate(-60deg);
      background-color: #0000ff;
    }
    .list:hover li:nth-last-child(5) {
      transform: rotate(-75deg);
      background-color: #00ffff;
    }
    .list:hover li:nth-last-child(6) {
      transform: rotate(-90deg);
      background-color: #800080;
    }

<ul class="list">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>7</li>
 <li>6</li>
 <li>5</li>
 <li>4</li>
 <li>3</li>
 <li>2</li>
</ul>