在 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
創建很多個簡單的圓形,通過控制其大小、透明度等屬性來讓煙霧看起來更加真實。
下一篇css3特效 縮放