CSS实现扇形

最新推荐文章于 2024-12-16 23:12:55 发布

污斑兔

最新推荐文章于 2024-12-16 23:12:55 发布

阅读量279

点赞数 3

文章标签： CSS 前端

本文链接：https://blog.youkuaiyun.com/zweizhao/article/details/143162622

版权

CSS实现扇形

html

<div class="sector"></div>
<div class="sector" style="border-radius: 0;"></div>

css

.sector {
  display: inline-block;
  margin: 20px;
  background: red;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  animation: sector 4s linear both infinite;
  transform: rotate(45deg);
}

@keyframes sector{
  from {
    clip-path: polygon(50% 50%, 0% 0%, 0% 0%);
  }
  25% {
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
  }
  25.000001% {
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 0%);
  }
  50%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%);
  }
  50.000001%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
  75%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  75.000001%{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%);
  }
  to{
    clip-path: polygon(50% 50%, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
  }
}