css3烟雾缭绕

在 CSS3 中，可以使用一些新的特性来创建真实的烟雾缭绕效果。以下是一个使用这些特性的简单的例子：

.smoke {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
    box-shadow: 0 0 50px 50px rgba(255, 255, 255, 0.1), 0 0 100px 100px rgba(0, 0, 0, 0.1), 0 0 150px 150px rgba(0, 0, 0, 0.2), 0 0 200px 200px rgba(0, 0, 0, 0.3);
    animation: smoke 5s ease-in-out infinite;
}
@keyframes smoke {
0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}
50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
}
100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
}
}
    

在这个例子中，使用了radial-gradient来创建类似于烟雾的背景，以及box-shadow来创建更复杂的阴影，让烟雾看起来更加真实。同时通过动画来创建烟雾的运动效果。

如果想要创建更加丰富的烟雾效果，可以尝试使用SVG或者 Canvas 等技术，创建更加真实的烟雾形态。例如使用SVG创建很多个简单的圆形，通过控制其大小、透明度等属性来让烟雾看起来更加真实。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！