html光圈效果,css+html 实现 光晕 光圈

html {

height: 100%;

}

body {

height: 100%;

background-color: #000;

margin: 0;

padding: 0;

}

.lensflare {

position: relative;

overflow: hidden;

width: 100%;

min-height: 100%;

overflow: hidden;

}

.source-spread {

position: absolute;

background: radial-gradient(rgba(255, 225, 255, .05) 10%, rgba(255, 225, 255, .05) 30%, rgba(0, 0, 0, 0) 60%);

border-radius: 50%;

width: 2000px;

height: 2000px;

margin-top: -1000px;

margin-left: -1000px;

top: 14%;

left: 14%;

z-index: 0;

}

.source {

position: absolute;

background: radial-gradient(#fff 0%, rgba(243, 206, 205, .4) 35%, rgba(88, 88, 88, .3) 60%, rgba(0, 0, 0, 0) 70%);

border-radius: 50%;

width: 800px;

height: 800px;

margin-top: -400px;

margin-left: -400px;

top: 14%;

left: 14%;

z-index: 2;

}

.source-beam {

position: absolute;

background: radial-gradient(rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, 0) 70%);

border-radius: 50%;

width: 2200px;

height: 28px;

margin-top: -14px;

margin-left: -1100px