在网上看到一个非常有趣的效果，使用svg实现的蓝天和白云：CodePen地址

效果预览：

改造为vue组件

<script setup>
import { onMounted, ref } from 'vue'
const cloud = ref(null)
// 随机数
const rn =(from, to) => ~~(Math.random() * (to - from + 1)) + from;
// 随机选择一个值
const rs=(...arr)=> arr[rn(0, arr.length - 1)];

// 生成box-shadow
const boxShadows = (max)=>{
  let ret = [];
  for (let i = 0; i < max; ++i) {
    ret.push(`
      ${ rn(1, 100) }vw ${ rn(1, 100) }vh ${ rn(20, 40) }vmin ${ rn(1, 20) }vmin
      ${ rs('#11cbd7', '#c6f1e7', '#f0fff3', '#96C9F4') }
    `)
  }
  return ret.join(',');
}
// 更新页面
const update = () => {
    cloud.value.style.boxShadow = boxShadows(30)
}
// 页面加载
onMounted(() => {
    update()
})
</script>

<style scoped>
.bg::after {
    content: '点击更新';
    font-size: 1rem;
    color: rgba(0, 0, 0, .3);
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 1rem;
    text-align: center;
}

.cloud {
    overflow: hidden;
    width: 1px;
    height: 1px;
    transform: translate(-100%, -100%);
    border-radius: 50%;
    filter: url(#filter);
}
</style>

虽然代码只有50行，但是这个效果还是非常惊艳的，因为会铺满整个页面。所以当做背景还是非常不错的。

原理分析

• 首先通过box-shadow生成一个阴影数组，大小和位置都是随机生成的。
• 然后设置到元素上，通过translate移动到页面之外。
• 最后通过filter滤镜，来生成最终的样式
  • fractalNoise：生成随机噪音
  • feDisplacementMap：位移映射
• 通过css 的filter滤镜，来生成最终的样式。

写到最后

如果你有好的css特效，也欢迎来分享。