CSS卡牌燃烧效果是一种常见的网页元素效果。该效果利用CSS的动画样式和transition属性，模拟出卡牌燃烧时的动态效果。本文将介绍该效果的实现方法。

.card {
position: relative;
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
border-radius: 5px;
overflow: hidden;
}
.card:hover .burn {
opacity: 1;
transform: scale(1);
transition: all 0.5s cubic-bezier(0.42, 0, 0, 1.01);
}
.burn {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: #ff5722;
border-radius: 50%;
opacity: 0;
transform: scale(0);
}

首先，我们需要一个卡牌容器元素，并给其设置对应的样式属性，如宽高、背景色、阴影、圆角等。

然后，我们需要一个燃烧元素，该元素需要放在卡牌的容器元素内部，并给其设置对应的样式属性，如绝对定位、背景色、圆角、缩放等。

最后，我们需要利用伪类选择器和transition属性，将燃烧元素从透明状态变为不透明状态，并从缩小状态变为正常状态，以实现卡牌燃烧效果。