径向渐变实现舞台灯光聚焦效果

 

<template> <div>     <div class="radial-circle"></div> </div> </template>

<style lang="scss">


$img: 'https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=';
html, body {     width: 100%;     height: 100%;     background-image: url($img);     background-repeat: no-repeat;     background-size: cover;     overflow: hidden; }
.radial-circle {     position: absolute;     top: -100%;     left: -100%;     right: -100%;     bottom: -100%;     background: radial-gradient(circle at 50% 50%, transparent 0%, transparent 3%, rgba(0, 0, 0, .7) 3.5%, rgba(0, 0, 0, .8) 100%);     animation: move 10s infinite alternate; }
@keyframes move {     0% {         transform: translateX(-10%);     }     100% {         transform: translateX(10%);     } }

</style>  

转自： https://csscoco.com/inspiration/#/./background/bg-radial-focus.md

标签：img,渐变,move,crop,background,radial,100%,舞台灯光,径向
来源： https://www.cnblogs.com/zhang-hong/p/15743596.html