角向渐变配合混合模式实现炫酷光影效果

<template> <div></div> </template>
<script> export default {
} </script>
<style lang="scss">
@function randomNum($max, $min: 0, $u: 1) {     @return ($min + random($max)) * $u; }
@function randomConicGradient() {     $n: 16 + random(16);     $list: ();         @for $i from 0 to $n {         $list: $list, rgba(hsl(100, randomNum(250, 5, 10%), randomNum(1, 1, 1%)), randomNum(100, 0, .01));     }             @return conic-gradient($list, nth($list, 1)); }
div {     width: 100vw;     height: 100vh;     margin: 0;     background:         radial-gradient(hsl(9, randomNum(100, 75, 1%), randomNum(100, 75%, 1%)), black);         &:before, &:after {         position: absolute;         top: 50%; left: 50%;         margin: -100vmax;         width: 200vmax;         height: 200vmax;         opacity: .5;         mix-blend-mode: overlay;         animation: rotate randomNum(100, 25, .1s) ease-in-out infinite;         content: '';     }         &:before { background: randomConicGradient(); }     &:after {         background: randomConicGradient();         animation-duration: randomNum(100, 25, .1s);         animation-direction: reverse;     } }
@keyframes rotate {     to {         transform: rotate(1turn);     } } </style>   转自： https://csscoco.com/inspiration/#/./background/bg-conic-gradient-animation.md

标签：角向,gradient,渐变,list,randomNum,animation,炫酷,background,100
来源： https://www.cnblogs.com/zhang-hong/p/15742372.html