| 1 | <template> |
| 2 | <div class="blur-effect"> |
| 3 | <div v-for="n in 8" :key="n"></div> |
| 4 | </div> |
| 5 | </template> |
| 6 | |
| 7 | <style lang="scss" scoped> |
| 8 | .blur-effect { |
| 9 | position: absolute; |
| 10 | width: 100%; |
| 11 | height: 100%; |
| 12 | top: 0; |
| 13 | left: 0; |
| 14 | z-index: 0; |
| 15 | |
| 16 | // Function to generate blur gradient |
| 17 | @function blur-gradient($start, $mid1, $mid2, $end) { |
| 18 | @return linear-gradient( |
| 19 | to top, |
| 20 | rgba(0, 0, 0, 0) $start, |
| 21 | rgba(0, 0, 0, 1) $mid1, |
| 22 | rgba(0, 0, 0, 1) $mid2, |
| 23 | rgba(0, 0, 0, 0) $end |
| 24 | ); |
| 25 | } |
| 26 | |
| 27 | & > div { |
| 28 | position: absolute; |
| 29 | inset: 0; |
| 30 | z-index: 1; |
| 31 | pointer-events: none; |
| 32 | } |
| 33 | |
| 34 | // Generate blur effects with incremental values |
| 35 | @for $i from 1 through 8 { |
| 36 | $blur: 1px * pow(1.6, $i - 1); |
| 37 | $start: ($i - 1) * 12.5%; |
| 38 | $mid1: $i * 12.5%; |
| 39 | $mid2: ($i + 1) * 12.5%; |
| 40 | $end: ($i + 2) * 12.5%; |
| 41 | |
| 42 | & > div:nth-child(#{$i}) { |
| 43 | backdrop-filter: blur($blur); |
| 44 | @if $i < 8 { |
| 45 | mask-image: blur-gradient($start, $mid1, $mid2, $end); |
| 46 | } @else { |
| 47 | mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 87.5%, rgba(0, 0, 0, 1) 100%); |
| 48 | } |
| 49 | } |
| 50 | } |
| 51 | } |
| 52 | </style> |