css3 烛光动画 |css 矩阵变形

/* 为元素添加烛光动画 */
.candle {
position: relative;
height: 300px;
width: 200px;
background-color: #874723;
border-radius: 30px;
}
.candle:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: radial-gradient(circle at 50% 0, #FFF, transparent);
opacity: 0.5;
}
.candle:after {
content: "";
position: absolute;
height: 50%;
width: 50%;
top: 0;
right: 0;
background: radial-gradient(circle at 50% 0, #FDCD5B, transparent);
opacity: 0.7;
transform: skewY(10deg);
border-radius: 0 0 0 50%;
}
.flame {
position: absolute;
height: 50px;
width: 50px;
top: 30px;
right: 30px;
background: radial-gradient(circle at 50% 60%, #FDCD5B, rgba(253, 205, 91, 0));
border-radius: 50%;
animation: flicker 0.5s infinite alternate;
}
/* 创建火焰动画 */
@keyframes flicker {
0% {
box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8);
}
25% {
box-shadow: 0 0 0 1rem rgba(253, 205, 91, 0.8);
}
50% {
box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8);
}
100% {
box-shadow: 0 0 0 0.5rem rgba(253, 205, 91, 0.8);
}
}

以上代码展示了如何为一个元素添加烛光动画，具体来说，大家首先通过:before伪元素创建了烛光的倒影，然后通过:after伪元素创建了鹰嘴形状的烛光主体。最后，大家通过.flame类来为烛光添加火焰动画。

以上就是CSS3烛光动画的基本实现方式，它可以为网站增添火花，增强视觉感受。不过需要注意的是，使用烛光动画也要注意网站的整体风格和视觉效果。