CSS3是一種可實現各種酷炫效果的語言,其中之一就是蠟燭火焰效果。
/*設置整個元素為黑色*/ .candle { width: 200px; height: 300px; background-color: black; /*設置元素的前景色為透明的*/ color: transparent; /*讓元素相對于父容器定位*/ position: relative; } /*設置蠟燭立體效果*/ .candle:before { content: ""; position: absolute; width: 60%; height: 80%; top: 10%; left: 20%; border-radius: 50%; background-color: #FFE974; box-shadow: 0 0 20px rgba(255, 233, 116, 0.7), 0 0 4px rgba(255, 233, 116, 0.5); } /*設置火焰效果*/ .candle:after { content: ""; position: absolute; width: 100%; height: 100px; top: -60px; left: 0; background: radial-gradient(red, yellow); border-radius: 50%; animation: fire 3s infinite; } /*設置火焰閃爍動畫*/ @keyframes fire { 0% { transform: scaleY(0.5); opacity: 0.5; } 50% { transform: scaleY(1.5); opacity: 1; } 100% { transform: scaleY(0.5); opacity: 0.5; } }
上面的代碼就是CSS3蠟燭火焰效果的具體實現,使用偽元素:before和:after來實現燈芯和火焰的效果,通過調整寬度、高度、圓角、陰影等屬性,可以讓效果更加逼真。
總之,CSS3蠟燭火焰效果不僅炫酷、逼真,還可用于各種節日、慶典等活動的裝飾效果,讓整個場景更加溫馨、歡樂。