css布局模拟区域光照效果代码-html代码-BFW代码库

css布局模拟区域光照效果代码

代码语言：html

代码描述：css布局模拟区域光照效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          background: black;
        }
        
        .arealight {
          width: 100vw;
          height: 100vh;
          pointer-events: none;
          user-select: none;
          background-image: conic-gradient(from 90deg at 80% 50%, black, #303a75), conic-gradient(from 270deg at 20% 50%, #303a75, black);
          -webkit-mask-image: radial-gradient(100% 50% at center center, black, transparent);
          background-position-x: 0%, 100%;
          background-position-y: 0%, 0%;
          background-size: 50% 100%, 50% 100%;
          transform: rotate(180deg) translate3d(0, 0, 0);
          transform-origin: center center;
          background-repeat: no-repeat;
        }
        .arealight:after {
          content: "";
          position: absolute;
          z-index: -1;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          opacity: 0.1;
          background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZavPnAPcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3F.........完整代码请登录后点击上方下载按钮下载查看