<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