前端聚光灯效果-(css-doodle)

CSS-doodle

css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。 下面是一个使用css-doodle库实现的一个聚光灯的效果 效果如下：（点击可以刷新） 代码如下： HTML

<css-doodle>
    :doodle { 
        @grid: 1x26 / 100vw 100vh; 
        background: #000;
    } 
    
    :container { 
        max-width: 70vw;
        margin: 0 auto;
    } 
    

    @even {
        position: relative;
        height: 70%;
        top: 10%;
        background: linear-gradient(to top, rgba(@r(50, 255), @r(255, 255), 255, 1), rgba(255, 255, 255, .1) 80%);
        transform: perspective(@r(7, 35)vmin) rotateX(-@r(15, 45)deg) skewX(@r(-60, 60)deg);
        transform-origin: center bottom;
        box-shadow: 0 0 2vmin .1vmin rgba(255, 255, 255, .7);
        opacity: 0;
        animation: fadeIn 7s infinite calc(@index() * 0.03s);
    }
    
    @keyframes fadeIn {
        1% {
            opacity: 1;
        }
        10% {
            opacity: 1;
            filter: hue-rotate(0);
        }
        50% {
            opacity: 1;
            transform: perspective(@r(10, 35)vmin) rotateX(-@r(15, 45)deg) skewX(0deg);
            filter: hue-rotate(360deg);
        }
        50.1% {
            opacity: 0;
        }
    }

</css-doodle>

css

html, body {
          
   
  margin: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}