css 光芒四射效果

Conan_LU7

已于 2024-07-19 13:51:49 修改

阅读量183

点赞数 4

文章标签： css css3 前端

于 2024-07-18 16:51:41 首次发布

本文链接：https://blog.csdn.net/conan_lu7/article/details/140527291

版权

.light {
    position: absolute;
    top: 300rpx;
    left: 200rpx;
    width: 20px;
    height: 100px;
    background: linear-gradient(to bottom, #FFF200,transparent);
    clip-path: polygon(10px 0,20px 100px, 0 100px);
  }
  .light2{
    transform-origin: 10px 0;
    transform: rotate(30deg);
  }
  .light3{
    transform-origin: 10px 0;
    transform: rotate(60deg);
  }
  .light4{
    transform-origin: 10px 0;
    transform: rotate(90deg);
  }
  .light5{
    transform-origin: 10px 0;
    transform: rotate(120deg);
  }
  .light6{
    transform-origin: 10px 0;
    transform: rotate(150deg);
  }
  .light7{
    transform-origin: 10px 0;
    transform: rotate(180deg);
  }
  .light8{
    transform-origin: 10px 0;
    transform: rotate(210deg);
  }
  .light9{
    transform-origin: 10px 0;
    transform: rotate(240deg);
  }
  .light10{
    transform-origin: 10px 0;
    transform: rotate(270deg);
  }
  .light11{
    transform-origin: 10px 0;
    transform: rotate(300deg);
  }
  .light12{
    transform-origin: 10px 0;
    transform: rotate(330deg);
  }

<div class="light"></div>
<div class="light light2"></div>
<div class="light light3"></div>
<div class="light light4"></div>
<div class="light light5"></div>
<div class="light light6"></div>
<div class="light light7"></div>
<div class="light light8"></div>
<div class="light light9"></div>
<div class="light light10"></div>
<div class="light light11"></div>
<div class="light light12"></div>
<div class="light light13"></div>