css烟雾动画效果怎么样 |css3 斜线运动

.smoke {
position: absolute;
background-color: #fff;
width: 60px;
height: 60px;
border-radius: 30px;
animation: smoke 10s linear infinite;
}
@keyframes smoke {
0% {
opacity: 0;
transform: translate(-30px, -30px) scale(0.3);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(-100px, -100px) scale(1);
}
}

以上是一个基础的CSS烟雾动画效果。其中，.smoke是一个固定宽高的圆形元素，通过关键帧动画实现烟雾的出现、逐渐变浓以及消失的效果。关键帧动画中，0%表示动画的开始状态，30%表示出现效果的最高点，而100%则表示消失的状态。通过不同的时间段改变烟雾元素的属性，实现了烟雾逐渐变浓、逐渐消失的效果。

当然，以上只是一个简单的烟雾动画效果，如果能够加以改进，结合其他元素，能够实现更加炫酷的效果。

总之，CSS烟雾动画效果是一个可以为网页增添华丽感和神秘感的不错选择。想要使用这种效果，只需要掌握一定的CSS知识即可。感兴趣的网页设计爱好者们，不妨试试看！