css3 雪花堆积 |css中a标签打开新窗口

/* CSS3雪花堆积效果 */
.snow-container {
position: relative;
animation: snow 5s linear infinite;
}
.snow-container .snowflake {
position: absolute;
top: -10px;
left: 0;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 0 5px #fff;
}
/* 关键帧 */
@keyframes snow {
from {
transform: translateY(0);
}
to {
transform: translateY(500px);
}
}

首先，大家需要一个相对定位的父容器，即类名为snow-container的元素。这个容器是所有雪花的父容器，大家需要为它添加animation属性，指定动画名称为snow、持续时间为5秒、动画曲线为linear、循环次数为无限。

接下来，大家需要一个绝对定位的子元素snowflake表示雪花。大家给这个元素设置top:-10px、left:0，让它一开始位于父容器的顶部中央。同时，设置雪花元素的宽度、高度、背景色以及边框圆角。这里可以根据自己的需要自定义。

最后，使用关键帧@keyframes定义动画效果。大家需要将雪花元素沿Y轴方向上动画，因此从初始状态（from）到最终状态（to），需要通过translateY将雪花元素移动到500px的位置。这个变化过程是线性的。