css折扇效果

最新推荐文章于 2022-09-20 14:25:13 发布

Rainbow~小二

最新推荐文章于 2022-09-20 14:25:13 发布

阅读量155

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_43720739/article/details/104850753

版权

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 500px;
        height: 500px;
        border-bottom: black 1px solid;
        margin: 0 auto;
        position: relative;
      }
      .box div {
        width: 100px;
        height: 300px;
        position: absolute;
        transition: 2s;
        left: 200px;
        transform-origin: center bottom;
        bottom: 50px;
        opacity: 0;
      }
      .box:hover div {
        opacity: 1;
      }

      .box .box1 {
        background: red;
        opacity: 1;
      }
      .box2 {
        background: orange;
      }
      .box3 {
        background: yellow;
      }
      .box4 {
        background: green;
      }
      .box5 {
        background: blue;
      }
      .box6 {
        background: skyblue;
      }
      .box7 {
        background: purple;
      }
      .box8 {
        background: orange;
      }
      .box9 {
        background: yellow;
      }
      .box10 {
        background: green;
      }
      .box11 {
        background: blue;
      }
      .box12 {
        background: skyblue;
      }
      .box13 {
        background: purple;
      }
      .box :hover .box1 {
        transform: rotate(0);
      }
      .box:hover .box7 {
        transform: rotate(-90deg);
      }
      .box:hover .box6 {
        transform: rotate(-75deg);
      }
      .box:hover .box5 {
        transform: rotate(-60deg);
      }
      .box:hover .box4 {
        transform: rotate(-45deg);
      }

      .box:hover .box3 {
        transform: rotate(-30deg);
      }
      .box:hover .box2 {
        transform: rotate(-15deg);
      }
      .box:hover .box8 {
        transform: rotate(15deg);
      }
      .box:hover .box9 {
        transform: rotate(30deg);
      }
      .box:hover .box10 {
        transform: rotate(45deg);
      }
      .box:hover .box11 {
        transform: rotate(60deg);
      }
      .box:hover .box12 {
        transform: rotate(75deg);
      }
      .box:hover .box13 {
        transform: rotate(90deg);
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="box1">1</div>
      <div class="box7">7</div>
      <div class="box6">6</div>
      <div class="box5">5</div>
      <div class="box4">4</div>
      <div class="box3">3</div>
      <div class="box2">2</div>
      <div class="box8">2</div>
      <div class="box9">3</div>
      <div class="box10">4</div>
      <div class="box11">5</div>
      <div class="box12">6</div>
      <div class="box13">7</div>
    </div>
  </body>
</html>

我们做折扇效果时应该注意结构的顺序，不然可能会导致折扇中的数字被遮盖。

Rainbow~小二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css折扇效果

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum...
复制链接

扫一扫