如何为卷轴上的标题制作结霜的玻璃效果

<div class="scroll">
   <h1>标题</h1>
</div>

.scroll {
   width: 500px;
   height: 200px;
   background-color: #f2f2f2;
}

.scroll {
   background-image: url("frost.png"); /* 结霜图片，需要提前准备好 */
   background-blur: 10px; /* 设置模糊效果，数值可以根据需要调整 */
}

.scroll {
   animation: frost-animation 5s infinite alternate; /* 设置动画效果，5s表示动画时长，infinite表示无限循环，alternate表示交替运动 */
}

@keyframes frost-animation {
   0% { background-blur: 0px; } /* 初始状态，无模糊效果 */
   50% { background-blur: 10px; } /* 中间状态，添加模糊效果 */
   100% { background-blur: 0px; } /* 结束状态，无模糊效果 */
}