纯 html + css + javascript 模拟阳光

效果图

代码

html

背景 + 太阳

<div class="bg">
    <div class="sun">
    </div>
</div>

css

.bg {
    width: 100%;
    height: 100%;
    background-color: #03a9f4;
}

.sun {
    position: absolute;
    inset: 0;
    background-color: #ffeb3b;
    clip-path: var(--clip);
}

javascript

/**
 * 思路:
 * 两个半径不一样的圆，交替画出他们对应的点，就能实现尖刺的效果
 */
const points = 100;
const r1 = 200;
const r2 = 1000;
// 圆心位置
const cx = 150;
const cy = 150;
let angPerPoint = (Math.PI * 2) / points;
let pointArr = [];
for (let i = 0; i < points; i += 1) {
    let r = i % 2 === 0 ? r1 : r2;
    let x = cx + Math.cos(i * angPerPoint) * r;
    let y = cy + Math.sin(i * angPerPoint) * r;
    pointArr.push([x, y])
}
let path = pointArr.map(item => `${item[0]}px ${item[1]}px`).join(',')

let se = document.querySelector('.sun')
se.style.setProperty('--clip', `polygon(${path})`);

在线代码演示

jsbin.com/xetahor/edi…